/**
 * ازکی آکادمی — Design System & Main Styles
 * RTL-first, Persian typography, blue spectrum brand palette
 */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Brand — طیف آبی (Flower / Solid) — overrides via customizer */
	--azki-primary: #0092ff;
	--azki-primary-dark: #0065ff;
	--azki-primary-hover: #00a8ff;
	--azki-primary-200: #3fbfff;
	--azki-primary-300: #88d4ff;
	--azki-primary-400: #c5eaff;
	--azki-primary-light: #88d4ff;
	--azki-primary-50: #ddf4ff;
	--azki-primary-100: #c5eaff;
	--azki-accent: #00b7ff;
	--azki-accent-200: #33c6ff;
	--azki-accent-300: #66d4ff;
	--azki-accent-400: #99e2ff;
	--azki-accent-500: #ccf1ff;

	/* Neutrals */
	--azki-white: #FFFFFF;
	--azki-gray-50: #F8FAFB;
	--azki-gray-100: #F3F4F6;
	--azki-gray-200: #E5E7EB;
	--azki-gray-300: #D1D5DB;
	--azki-gray-400: #9CA3AF;
	--azki-gray-500: #6B7280;
	--azki-gray-600: #4B5563;
	--azki-gray-700: #374151;
	--azki-gray-800: #1F2937;
	--azki-gray-900: #111827;

	/* Semantic */
	--azki-text: var(--azki-gray-800);
	--azki-text-muted: var(--azki-gray-500);
	--azki-text-inverse: var(--azki-white);
	--azki-bg: var(--azki-white);
	--azki-bg-alt: var(--azki-gray-50);
	--azki-bg-accent: var(--azki-primary-50);
	--azki-border: var(--azki-gray-200);
	--azki-success: #10B981;
	--azki-warning: #F59E0B;
	--azki-error: #EF4444;

	/* Typography — Yekan Bakh FaNum */
	--azki-font: 'Yekan Bakh FaNum', Tahoma, Arial, sans-serif;
	--azki-font-size-xs: 0.75rem;
	--azki-font-size-sm: 0.875rem;
	--azki-font-size-base: 1rem;
	--azki-font-size-lg: 1.125rem;
	--azki-font-size-xl: 1.25rem;
	--azki-font-size-2xl: 1.5rem;
	--azki-font-size-3xl: 1.875rem;
	--azki-font-size-4xl: 2.25rem;
	--azki-font-size-5xl: 3rem;
	--azki-line-height-tight: 1.25;
	--azki-line-height-normal: 1.6;
	--azki-line-height-relaxed: 1.75;
	--azki-font-weight-normal: 400;
	--azki-font-weight-medium: 500;
	--azki-font-weight-semibold: 600;
	--azki-font-weight-bold: 700;

	/* Spacing (RTL-aware logical properties used where possible) */
	--azki-space-1: 0.25rem;
	--azki-space-2: 0.5rem;
	--azki-space-3: 0.75rem;
	--azki-space-4: 1rem;
	--azki-space-5: 1.25rem;
	--azki-space-6: 1.5rem;
	--azki-space-8: 2rem;
	--azki-space-10: 2.5rem;
	--azki-space-12: 3rem;
	--azki-space-16: 4rem;
	--azki-space-20: 5rem;
	--azki-space-24: 6rem;

	/* Layout */
	--azki-container: 1200px;
	--azki-container-narrow: 800px;
	--azki-header-height: 72px;

	/* Radius */
	--azki-radius-sm: 6px;
	--azki-radius: 10px;
	--azki-radius-lg: 16px;
	--azki-radius-xl: 24px;
	--azki-radius-full: 9999px;

	/* Shadows */
	--azki-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--azki-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	--azki-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
	--azki-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
	--azki-shadow-primary: 0 8px 24px color-mix(in srgb, var(--azki-primary) 22%, transparent);

	/* Transitions */
	--azki-transition: 0.2s ease;
	--azki-transition-slow: 0.35s ease;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--azki-font);
	font-size: var(--azki-font-size-base);
	line-height: var(--azki-line-height-normal);
	color: var(--azki-text);
	background-color: var(--azki-bg);
	direction: rtl;
	text-align: right;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

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

a:hover {
	color: var(--azki-primary-dark);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--azki-space-4);
	font-weight: var(--azki-font-weight-bold);
	line-height: var(--azki-line-height-tight);
	color: var(--azki-gray-900);
}

h1 { font-size: var(--azki-font-size-4xl); }
h2 { font-size: var(--azki-font-size-3xl); }
h3 { font-size: var(--azki-font-size-2xl); }
h4 { font-size: var(--azki-font-size-xl); }
h5 { font-size: var(--azki-font-size-lg); }
h6 { font-size: var(--azki-font-size-base); }

p {
	margin: 0 0 var(--azki-space-4);
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button,
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

:focus-visible {
	outline: 2px solid var(--azki-primary);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. Layout Utilities
   ========================================================================== */

.azki-container {
	width: 100%;
	max-width: var(--azki-container);
	margin-inline: auto;
	padding-inline: var(--azki-space-6);
}

.azki-container--narrow {
	max-width: var(--azki-container-narrow);
}

.azki-section {
	padding-block: var(--azki-space-16);
}

.azki-section--alt {
	background:
		radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--azki-primary) 6%, transparent), transparent 60%),
		var(--azki-bg-alt);
}

.azki-section--accent {
	background-color: var(--azki-bg-accent);
}

.azki-section__header {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--azki-space-12);
}

.azki-section__title {
	font-size: var(--azki-font-size-3xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: var(--azki-space-3);
}

.azki-section__header .azki-section__title::after {
	content: '';
	display: block;
	width: 52px;
	height: 4px;
	margin: var(--azki-space-3) auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--azki-primary), var(--azki-accent, #00b7ff));
}

.azki-section__subtitle {
	font-size: var(--azki-font-size-lg);
	color: var(--azki-text-muted);
	margin-bottom: 0;
}

.azki-grid {
	display: grid;
	gap: var(--azki-space-6);
}

.azki-grid--2 { grid-template-columns: repeat(2, 1fr); }
.azki-grid--3 { grid-template-columns: repeat(3, 1fr); }
.azki-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.azki-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.azki-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.azki-grid--2,
	.azki-grid--3,
	.azki-grid--4 { grid-template-columns: 1fr; }

	.azki-section { padding-block: var(--azki-space-12); }

	h1 { font-size: var(--azki-font-size-3xl); }
	h2, .azki-section__title { font-size: var(--azki-font-size-2xl); }
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.azki-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--azki-space-2);
	padding: var(--azki-space-3) var(--azki-space-6);
	font-size: var(--azki-font-size-base);
	font-weight: var(--azki-font-weight-medium);
	line-height: 1.5;
	border-radius: var(--azki-radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--azki-transition);
	text-decoration: none;
	white-space: nowrap;
}

.azki-btn--primary {
	background-color: var(--azki-primary);
	color: var(--azki-text-inverse);
	border-color: var(--azki-primary);
}

.azki-btn--primary:hover {
	background-color: var(--azki-primary-dark);
	border-color: var(--azki-primary-dark);
	color: var(--azki-text-inverse);
	box-shadow: var(--azki-shadow-primary);
}

.azki-btn--secondary {
	background-color: var(--azki-white);
	color: var(--azki-primary);
	border-color: var(--azki-primary);
}

.azki-btn--secondary:hover {
	background-color: var(--azki-primary-50);
	color: var(--azki-primary-dark);
}

.azki-btn--ghost {
	background-color: transparent;
	color: var(--azki-text);
	border-color: var(--azki-border);
}

.azki-btn--ghost:hover {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
}

.azki-btn--lg {
	padding: var(--azki-space-4) var(--azki-space-8);
	font-size: var(--azki-font-size-lg);
}

.azki-btn--sm {
	padding: var(--azki-space-2) var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
}

.azki-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-3);
}

/* ==========================================================================
   5. Cards
   ========================================================================== */

.azki-card {
	background: var(--azki-white);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 8%, var(--azki-border));
	border-radius: var(--azki-radius-xl, 20px);
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.azki-card:hover {
	box-shadow: 0 18px 40px color-mix(in srgb, var(--azki-primary) 12%, transparent);
	border-color: color-mix(in srgb, var(--azki-primary) 35%, transparent);
	transform: translateY(-6px);
}

.azki-card__image img {
	transition: transform 0.5s ease;
}

.azki-card:hover .azki-card__image img {
	transform: scale(1.05);
}

.azki-card__image {
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background: var(--azki-gray-100);
}

.azki-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.azki-card__body {
	padding: var(--azki-space-5);
}

.azki-card__badge {
	display: inline-block;
	padding: var(--azki-space-1) var(--azki-space-3);
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-primary-dark);
	background: var(--azki-primary-light);
	border-radius: var(--azki-radius-full);
	margin-bottom: var(--azki-space-3);
}

.azki-card__title {
	font-size: var(--azki-font-size-lg);
	margin-bottom: var(--azki-space-2);
}

.azki-card__title a {
	color: inherit;
}

.azki-card__title a:hover {
	color: var(--azki-primary);
}

.azki-card__excerpt {
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	margin-bottom: var(--azki-space-4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.azki-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--azki-space-3);
	padding-top: var(--azki-space-3);
	border-top: 1px solid var(--azki-border);
}

/* Progress bar */
.azki-progress {
	height: 6px;
	background: var(--azki-gray-100);
	border-radius: var(--azki-radius-full);
	overflow: hidden;
	flex: 1;
}

.azki-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--azki-primary), var(--azki-accent));
	border-radius: var(--azki-radius-full);
	transition: width var(--azki-transition-slow);
}

.azki-progress__label {
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
	white-space: nowrap;
}

/* ==========================================================================
   5b. Course Cards
   ========================================================================== */

.azki-section--courses {
	position: relative;
	background: linear-gradient(180deg, var(--azki-primary-50) 0%, var(--azki-white) 42%);
	overflow: hidden;
}

.azki-section--courses::before {
	content: '';
	position: absolute;
	inset-block-start: -120px;
	inset-inline-end: -80px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-primary) 12%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.azki-section__eyebrow {
	display: inline-block;
	padding: var(--azki-space-1) var(--azki-space-4);
	margin-bottom: var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-primary-dark);
	background: var(--azki-white);
	border: 1px solid var(--azki-primary-light);
	border-radius: var(--azki-radius-full);
}

.azki-section__meta {
	margin-top: var(--azki-space-4);
	margin-bottom: 0;
	font-size: var(--azki-font-size-sm);
	color: var(--azki-primary);
	font-weight: var(--azki-font-weight-medium);
}

.azki-section__footer {
	text-align: center;
	margin-top: var(--azki-space-10);
}

.azki-section__filters {
	display: flex;
	justify-content: center;
	margin-bottom: var(--azki-space-10);
}

.azki-front-page > .azki-section + .azki-section {
	border-block-start: 1px solid color-mix(in srgb, var(--azki-border, #e5e7eb) 70%, transparent);
}

.azki-courses-grid {
	align-items: stretch;
}

.azki-course-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid color-mix(in srgb, var(--azki-primary) 12%, transparent);
	border-radius: var(--azki-radius-xl, 20px);
	background: var(--azki-white);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.azki-course-card:hover {
	border-color: color-mix(in srgb, var(--azki-primary) 40%, transparent);
	box-shadow: 0 20px 44px color-mix(in srgb, var(--azki-primary) 16%, transparent);
	transform: translateY(-6px);
}

.azki-course-card__media {
	position: relative;
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background: var(--azki-gray-100);
}

.azki-course-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
}

.azki-course-card__image-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--azki-transition-slow);
}

.azki-course-card:hover .azki-course-card__image-link img {
	transform: scale(1.05);
}

.azki-course-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--azki-primary-50) 0%, var(--azki-primary-light) 55%, var(--azki-primary-100) 100%);
}

.azki-course-card__badge {
	position: absolute;
	inset-block-start: var(--azki-space-3);
	inset-inline-start: var(--azki-space-3);
	z-index: 2;
	padding: var(--azki-space-1) var(--azki-space-3);
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-primary-dark);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	border-radius: var(--azki-radius-full);
	box-shadow: var(--azki-shadow-sm);
}

.azki-course-card__status {
	position: absolute;
	inset-block-end: var(--azki-space-3);
	inset-inline-start: var(--azki-space-3);
	z-index: 2;
	padding: var(--azki-space-1) var(--azki-space-3);
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-medium);
	border-radius: var(--azki-radius-full);
}

.azki-course-card__status--completed {
	background: rgba(16, 185, 129, 0.92);
	color: var(--azki-white);
}

.azki-course-card__status--in_progress {
	background: color-mix(in srgb, var(--azki-primary) 92%, transparent);
	color: var(--azki-white);
}

.azki-course-card__status--enrolled {
	background: rgba(255, 255, 255, 0.92);
	color: var(--azki-gray-700);
}

.azki-course-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--azki-space-5) var(--azki-space-5) var(--azki-space-4);
}

.azki-course-card__title {
	font-size: var(--azki-font-size-lg);
	font-weight: var(--azki-font-weight-semibold);
	line-height: var(--azki-line-height-tight);
	margin: 0 0 var(--azki-space-2);
}

.azki-course-card__title a {
	color: inherit;
	text-decoration: none;
}

.azki-course-card__title a:hover {
	color: var(--azki-primary);
}

.azki-course-card__excerpt {
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	line-height: var(--azki-line-height-relaxed);
	margin: 0 0 var(--azki-space-4);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.azki-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-3);
	margin-top: auto;
	margin-bottom: var(--azki-space-4);
}

.azki-course-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--azki-space-2);
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-course-card__meta-item svg {
	flex-shrink: 0;
	color: var(--azki-primary);
}

.azki-course-card__footer {
	display: flex;
	align-items: center;
	gap: var(--azki-space-3);
	padding-top: var(--azki-space-4);
	border-top: 1px solid var(--azki-border);
	margin-top: 0;
}

.azki-course-card__progress {
	flex: 1;
	min-width: 0;
}

.azki-course-card__progress-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--azki-space-2);
	margin-bottom: var(--azki-space-2);
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-course-card__progress-head strong {
	color: var(--azki-primary);
	font-weight: var(--azki-font-weight-semibold);
}

.azki-course-card__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	color: var(--azki-white);
	background: var(--azki-primary);
	border: none;
	border-radius: var(--azki-radius);
	text-decoration: none;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--azki-primary) 28%, transparent);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.azki-course-card__action:hover {
	color: var(--azki-white);
	background: var(--azki-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--azki-primary) 34%, transparent);
}

.azki-course-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--azki-space-2);
	width: 100%;
	padding: 0.7rem 1rem;
	font-size: var(--azki-font-size-sm);
	font-weight: 700;
	line-height: 1.2;
	color: var(--azki-white);
	text-decoration: none;
	background: linear-gradient(135deg, var(--azki-primary) 0%, var(--azki-primary-dark) 100%);
	border: none;
	border-radius: var(--azki-radius);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--azki-primary) 26%, transparent);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.azki-course-card__cta:hover,
.azki-course-card__cta:focus-visible {
	color: var(--azki-white);
	background: linear-gradient(135deg, var(--azki-primary-hover, #00a8ff) 0%, var(--azki-primary-dark) 100%);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--azki-primary) 36%, transparent);
}

.azki-course-card__cta:active {
	transform: translateY(0);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--azki-primary) 22%, transparent);
}

.azki-course-card__cta svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.azki-course-card__cta:hover svg {
	transform: translateX(-3px);
}

.azki-course-card:hover .azki-course-card__cta {
	box-shadow: 0 12px 26px color-mix(in srgb, var(--azki-primary) 34%, transparent);
}

/* Course archive filters */
.azki-page-header--courses {
	background: linear-gradient(180deg, var(--azki-primary-50) 0%, var(--azki-bg-alt) 100%);
}

.azki-course-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
	margin-bottom: var(--azki-space-8);
	padding: var(--azki-space-2);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-lg);
}

.azki-course-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--azki-space-2);
	padding: var(--azki-space-2) var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-text-muted);
	text-decoration: none;
	border-radius: var(--azki-radius-full);
	transition: all var(--azki-transition);
}

.azki-course-filter:hover {
	color: var(--azki-primary);
	background: var(--azki-primary-50);
}

.azki-course-filter.is-active {
	color: var(--azki-white);
	background: var(--azki-primary);
}

.azki-course-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0 var(--azki-space-2);
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-semibold);
	border-radius: var(--azki-radius-full);
	background: rgba(0, 0, 0, 0.06);
}

.azki-course-filter.is-active .azki-course-filter__count {
	background: rgba(255, 255, 255, 0.2);
}

.azki-page-content--courses {
	padding-block: var(--azki-space-10);
}

@media (max-width: 640px) {
	.azki-course-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.azki-course-filters::-webkit-scrollbar {
		display: none;
	}

	.azki-course-filter {
		white-space: nowrap;
		flex-shrink: 0;
	}
}

/* Icon card (quick access, features) */
.azki-icon-card {
	--icon-card-notch: var(--azki-bg-alt, #f1f5f9);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 36px;
	padding: 0 var(--azki-space-6) var(--azki-space-10);
	background: var(--azki-white);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 10%, var(--azki-border));
	border-radius: var(--azki-radius-xl, 20px);
	text-decoration: none;
	color: inherit;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
	height: calc(100% - 36px);
	isolation: isolate;
}

/* Gradient fill that fades in on hover */
.azki-icon-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--azki-accent, #00b7ff) 45%, transparent), transparent 60%),
		linear-gradient(140deg, var(--azki-primary) 0%, var(--azki-primary-dark, #0052d4) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: -1;
}

/* Dashed orbit around the cutout icon */
.azki-icon-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 88px;
	height: 88px;
	transform: translate(-50%, -50%) rotate(0deg);
	border-radius: 50%;
	border: 1.5px dashed color-mix(in srgb, var(--azki-primary) 35%, transparent);
	pointer-events: none;
	z-index: 2;
	transition: border-color 0.35s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.azki-icon-card:hover {
	border-color: transparent;
	box-shadow: 0 22px 48px color-mix(in srgb, var(--azki-primary) 30%, transparent);
	color: inherit;
	transform: translateY(-6px);
}

.azki-icon-card:hover::before {
	opacity: 1;
}

.azki-icon-card:hover::after {
	border-color: color-mix(in srgb, var(--azki-accent, #00b7ff) 70%, transparent);
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Cutout icon — pulled half above the card's top edge */
.azki-icon-card__icon {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	margin-top: -32px;
	margin-bottom: var(--azki-space-5);
	background: linear-gradient(135deg, var(--azki-primary) 0%, var(--azki-primary-dark, #0052d4) 100%);
	color: var(--azki-white);
	border-radius: 50%;
	box-shadow:
		0 0 0 9px var(--icon-card-notch),
		0 12px 24px color-mix(in srgb, var(--azki-primary) 30%, transparent);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, color 0.35s ease;
}

.azki-icon-card:hover .azki-icon-card__icon {
	transform: scale(1.1);
	background: var(--azki-white);
	color: var(--azki-primary);
}

.azki-icon-card__title {
	position: relative;
	z-index: 1;
	font-size: var(--azki-font-size-lg);
	font-weight: 700;
	margin-bottom: var(--azki-space-2);
	transition: color 0.35s ease;
}

.azki-icon-card:hover .azki-icon-card__title {
	color: var(--azki-white);
}

.azki-icon-card__desc {
	position: relative;
	z-index: 1;
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	line-height: 1.8;
	margin-bottom: 0;
	transition: color 0.35s ease;
}

.azki-icon-card:hover .azki-icon-card__desc {
	color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   6. Forms
   ========================================================================== */

.azki-form-group {
	margin-bottom: var(--azki-space-5);
}

.azki-label {
	display: block;
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	margin-bottom: var(--azki-space-2);
	color: var(--azki-gray-700);
}

.azki-input,
.azki-textarea,
.azki-select {
	width: 100%;
	padding: var(--azki-space-3) var(--azki-space-4);
	font-size: var(--azki-font-size-base);
	color: var(--azki-text);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius);
	transition: border-color var(--azki-transition), box-shadow var(--azki-transition);
}

.azki-input:focus,
.azki-textarea:focus,
.azki-select:focus {
	border-color: var(--azki-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--azki-primary) 18%, transparent);
	outline: none;
}

.azki-textarea {
	min-height: 140px;
	resize: vertical;
}

.azki-search-form {
	position: relative;
	width: 100%;
}

.azki-search-form__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--azki-space-2);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: 14px;
	padding: var(--azki-space-2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: border-color var(--azki-transition), box-shadow var(--azki-transition);
}

.azki-search-form:focus-within .azki-search-form__field {
	border-color: color-mix(in srgb, var(--azki-primary) 40%, transparent);
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--azki-primary) 12%, transparent),
		0 8px 24px color-mix(in srgb, var(--azki-primary) 8%, transparent);
}

.azki-search-form__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	color: var(--azki-gray-400);
}

.azki-search-form__input {
	flex: 1;
	min-width: 0;
	padding: var(--azki-space-2) 0;
	border: none;
	background: transparent;
	font-size: var(--azki-font-size-base);
	color: var(--azki-text);
	outline: none;
}

.azki-search-form__input::placeholder {
	color: var(--azki-gray-400);
}

.azki-search-form__clear.is-hidden {
	display: none;
}

.azki-search-form__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: var(--azki-gray-100);
	color: var(--azki-gray-500);
	cursor: pointer;
	transition: background var(--azki-transition), color var(--azki-transition);
}

.azki-search-form__clear:hover {
	background: var(--azki-gray-200);
	color: var(--azki-gray-700);
}

.azki-search-form__submit {
	flex-shrink: 0;
	padding: var(--azki-space-2) var(--azki-space-4);
	border: none;
	border-radius: 10px;
	background: var(--azki-primary);
	color: var(--azki-white);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	cursor: pointer;
	transition: background var(--azki-transition), transform var(--azki-transition);
}

.azki-search-form__submit:hover {
	background: var(--azki-primary-dark);
}

.azki-search-form--hero .azki-search-form__field {
	padding: var(--azki-space-3);
	border-radius: 16px;
}

.azki-search-form--hero .azki-search-form__input {
	font-size: var(--azki-font-size-lg);
}

.azki-search-form--panel .azki-search-form__submit {
	display: none;
}

.azki-search-form--panel .azki-search-form__field {
	border-radius: 12px;
}

/* Live suggestions dropdown */
.azki-search-suggestions {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline: 0;
	z-index: 10;
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: 14px;
	box-shadow: var(--azki-shadow-md);
	overflow: hidden;
	max-height: 360px;
	overflow-y: auto;
}

.azki-search-suggestions__status {
	padding: var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	text-align: center;
}

.azki-search-suggestions__item {
	display: flex;
	align-items: center;
	gap: var(--azki-space-3);
	padding: var(--azki-space-3) var(--azki-space-4);
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--azki-gray-100);
	transition: background var(--azki-transition);
}

.azki-search-suggestions__item:last-child {
	border-bottom: none;
}

.azki-search-suggestions__item:hover,
.azki-search-suggestions__item.is-active {
	background: var(--azki-primary-50);
}

.azki-search-suggestions__thumb,
.azki-search-suggestions__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--azki-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--azki-primary);
}

.azki-search-suggestions__body {
	min-width: 0;
	flex: 1;
}

.azki-search-suggestions__title {
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-gray-800);
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.azki-search-suggestions__meta {
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-search-suggestions__footer {
	display: block;
	padding: var(--azki-space-3) var(--azki-space-4);
	text-align: center;
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-primary);
	background: var(--azki-gray-50);
	text-decoration: none;
}

.azki-search-suggestions__footer:hover {
	background: var(--azki-primary-50);
}

/* Search overlay — must live outside .azki-header (backdrop-filter breaks fixed positioning) */
.azki-search-overlay {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(1rem, 8vh, 4rem) var(--azki-space-4);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.azki-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.azki-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(6px);
}

.azki-search-overlay__dialog {
	position: relative;
	width: min(100%, 680px);
	background: var(--azki-white);
	border-radius: 20px;
	padding: var(--azki-space-6);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
	transform: translateY(-12px) scale(0.98);
	transition: transform 0.25s ease;
}

.azki-search-overlay.is-open .azki-search-overlay__dialog {
	transform: translateY(0) scale(1);
}

.azki-search-overlay__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--azki-space-4);
	margin-bottom: var(--azki-space-4);
}

.azki-search-overlay__title {
	margin: 0;
	font-size: var(--azki-font-size-lg);
	font-weight: var(--azki-font-weight-bold);
	color: var(--azki-gray-800);
}

.azki-search-overlay__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--azki-border);
	border-radius: 10px;
	background: var(--azki-white);
	color: var(--azki-gray-600);
	cursor: pointer;
	transition: all var(--azki-transition);
}

.azki-search-overlay__close:hover {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
}

.azki-search-overlay__hints {
	margin-top: var(--azki-space-5);
}

.azki-search-overlay__hints-label {
	display: block;
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-text-muted);
	margin-bottom: var(--azki-space-3);
}

.azki-search-overlay__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
}

.azki-search-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--azki-gray-100);
	color: var(--azki-gray-700);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	text-decoration: none;
	transition: all var(--azki-transition);
}

.azki-search-chip:hover {
	background: var(--azki-primary-50);
	color: var(--azki-primary-dark);
}

.azki-search-overlay__shortcut {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
	margin: var(--azki-space-5) 0 0;
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-search-overlay__shortcut kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	padding: 2px 6px;
	border: 1px solid var(--azki-border);
	border-radius: 6px;
	background: var(--azki-gray-50);
	font-family: inherit;
	font-size: 0.6875rem;
	line-height: 1.4;
}

.azki-header__search-toggle.is-active {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
	background: var(--azki-primary-50);
}

.azki-mobile-menu__search {
	margin-top: var(--azki-space-6);
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.azki-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--azki-border);
	height: var(--azki-header-height);
	overflow: visible;
}

.azki-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	gap: var(--azki-space-4);
}

@media (min-width: 1024px) {
	.azki-header__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		gap: var(--azki-space-6);
	}

	.azki-header__inner .azki-brand--header {
		justify-self: start;
		max-width: 200px;
	}

	.azki-header__nav {
		justify-self: center;
	}

	.azki-header__actions {
		justify-self: end;
	}
}

/* Unified site brand (logo + text) */
.azki-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--azki-space-3);
	flex: 1 1 auto;
	min-width: 0;
	max-width: calc(100% - 8.5rem);
	text-decoration: none;
	color: var(--azki-gray-900);
	line-height: 1.2;
}

.azki-brand__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.azki-brand__logo-img {
	display: block;
	max-height: 44px;
	max-width: min(180px, 100%);
	width: auto;
	height: auto;
	object-fit: contain;
}

.azki-brand__text {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2em;
	font-size: var(--azki-font-size-xl);
	font-weight: var(--azki-font-weight-bold);
	white-space: nowrap;
}

.azki-brand__name {
	color: inherit;
}

.azki-brand__accent {
	color: var(--azki-primary);
}

.azki-brand--header.azki-brand--has-logo {
	flex: 0 1 auto;
	max-width: 200px;
}

.azki-brand--footer {
	max-width: none;
	flex: none;
	margin-bottom: var(--azki-space-4);
	color: var(--azki-gray-900);
}

.azki-brand--footer .azki-brand__logo-img {
	max-height: 40px;
	max-width: 160px;
}

.azki-brand--footer .azki-brand__text {
	font-size: var(--azki-font-size-xl);
}

.azki-brand--footer .azki-brand__accent {
	color: var(--azki-primary);
}

.azki-brand--mobile {
	max-width: calc(100% - 3rem);
	flex: 1;
}

@media (min-width: 1024px) {
	.azki-brand--header {
		flex: 0 1 auto;
	}
}

.azki-header__nav {
	display: none;
}

@media (min-width: 1024px) {
	.azki-header__nav {
		display: block;
	}
}

.azki-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--azki-space-1);
}

.azki-nav__item {
	position: relative;
}

.azki-nav__link {
	display: flex;
	align-items: center;
	gap: var(--azki-space-1);
	padding: var(--azki-space-2) var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-gray-700);
	border-radius: var(--azki-radius);
	transition: color var(--azki-transition), background var(--azki-transition);
}

.azki-nav__link:hover {
	color: var(--azki-primary);
}

.azki-nav__item--active > .azki-nav__link,
.azki-nav__item--ancestor > .azki-nav__link {
	color: var(--azki-primary);
	font-weight: var(--azki-font-weight-semibold);
}

.azki-nav__submenu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	padding: var(--azki-space-2);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius);
	box-shadow: var(--azki-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: all var(--azki-transition);
}

.azki-nav__item--has-children:hover > .azki-nav__submenu,
.azki-nav__item--has-children:focus-within > .azki-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.azki-nav__submenu .azki-nav__link {
	display: block;
	padding: var(--azki-space-3) var(--azki-space-4);
}

.azki-nav__submenu .azki-nav__link:hover,
.azki-nav__submenu .azki-nav__item--active > .azki-nav__link {
	color: var(--azki-primary);
	background: transparent;
}

.azki-header__actions {
	display: flex;
	align-items: center;
	gap: var(--azki-space-3);
	flex-shrink: 0;
	overflow: visible;
}

.azki-header__search-toggle,
.azki-header__menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius);
	color: var(--azki-gray-600);
	cursor: pointer;
	transition: all var(--azki-transition);
}

.azki-header__search-toggle:hover,
.azki-header__menu-toggle:hover {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
}

.azki-header__profile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--azki-space-2);
}

.azki-header__profile-icon {
	flex-shrink: 0;
	display: block;
}

.azki-header__profile-label {
	white-space: nowrap;
}

/* Mobile: icon-only profile button (matches search / menu toggles) */
@media (max-width: 1023px) {
	.azki-header__search-toggle[data-azki-search-open] {
		display: none;
	}

	.azki-header__profile.azki-btn {
		width: 40px;
		height: 40px;
		min-height: 40px;
		padding: 0;
		border-width: 1px;
		border-radius: var(--azki-radius);
		color: var(--azki-gray-600);
		background: none;
		gap: 0;
	}

	.azki-header__profile.azki-btn:hover,
	.azki-header__profile.azki-btn:focus-visible {
		border-color: var(--azki-primary);
		color: var(--azki-primary);
		background: none;
		box-shadow: none;
		outline: none;
	}

	.azki-header__profile-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (min-width: 1024px) {
	.azki-header__profile-icon {
		display: none;
	}
}

.azki-header__menu-toggle {
	display: flex;
}

@media (min-width: 1024px) {
	.azki-header__menu-toggle {
		display: none;
	}
}

/* Mobile menu */
.azki-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1100;
	visibility: hidden;
	pointer-events: none;
}

.azki-mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}

.azki-mobile-menu__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity var(--azki-transition-slow);
}

.azki-mobile-menu.is-open .azki-mobile-menu__overlay {
	opacity: 1;
}

.azki-mobile-menu__panel {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	width: min(340px, 88vw);
	height: 100%;
	height: 100dvh;
	background: var(--azki-white);
	box-shadow: var(--azki-shadow-lg);
	transform: translateX(100%);
	transition: transform var(--azki-transition-slow);
	overflow-x: hidden;
	overflow-y: auto;
	padding: var(--azki-space-5);
	-webkit-overflow-scrolling: touch;
}

html[dir="rtl"] .azki-mobile-menu__panel,
body.rtl .azki-mobile-menu__panel {
	transform: translateX(-100%);
}

.azki-mobile-menu.is-open .azki-mobile-menu__panel {
	transform: translateX(0) !important;
}

.azki-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--azki-space-6);
	padding-bottom: var(--azki-space-4);
	border-bottom: 1px solid var(--azki-border);
}

.azki-mobile-menu__close {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--azki-gray-600);
	padding: var(--azki-space-2);
}

.azki-mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--azki-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.azki-mobile-nav__item {
	width: 100%;
}

.azki-mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--azki-space-3);
	width: 100%;
	padding: var(--azki-space-3) var(--azki-space-4);
	font-size: var(--azki-font-size-base);
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-gray-700);
	border-radius: var(--azki-radius);
	text-decoration: none;
	line-height: 1.4;
}

.azki-mobile-nav__link:hover,
.azki-mobile-nav__item--active > .azki-mobile-nav__link {
	color: var(--azki-primary);
}

.azki-mobile-nav__label {
	flex: 1;
	min-width: 0;
	text-align: start;
}

.azki-mobile-nav__chevron {
	flex-shrink: 0;
	color: var(--azki-gray-400);
	transition: transform var(--azki-transition);
}

.azki-mobile-nav__item--has-children.is-open > .azki-mobile-nav__link .azki-mobile-nav__chevron {
	transform: rotate(180deg);
	color: var(--azki-primary);
}

.azki-mobile-nav__submenu {
	display: none;
	flex-direction: column;
	gap: var(--azki-space-1);
	padding: var(--azki-space-1) 0 var(--azki-space-2);
	padding-inline-start: var(--azki-space-4);
	margin: 0;
	list-style: none;
}

.azki-mobile-nav__item--has-children.is-open > .azki-mobile-nav__submenu {
	display: flex;
}

.azki-mobile-nav__submenu .azki-mobile-nav__link {
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-normal);
	color: var(--azki-gray-600);
	padding-block: var(--azki-space-2);
}

.azki-mobile-menu__panel .azki-brand {
	flex: 1 1 auto;
	max-width: calc(100% - 3rem);
}

.azki-mobile-menu__panel .azki-brand__logo-img {
	max-height: 36px;
	max-width: 140px;
}

@media (min-width: 1024px) {
	.azki-mobile-menu {
		display: none !important;
	}
}

/* ==========================================================================
   8. Footer — blue brand card
   ========================================================================== */

.azki-footer {
	position: relative;
	isolation: isolate;
	background: linear-gradient(180deg, #f7faff 0%, #eef4fd 100%);
	color: rgba(226, 238, 255, 0.85);
	padding-top: clamp(3rem, 6vw, 4.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.azki-footer__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
	overflow: hidden;
}

.azki-footer__aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
}

.azki-footer__aurora--1 {
	width: min(560px, 80vw);
	height: min(560px, 80vw);
	top: -30%;
	inset-inline-start: -10%;
	background: radial-gradient(circle at 45% 55%, color-mix(in srgb, var(--azki-primary) 16%, transparent), transparent 65%);
	opacity: 0.5;
}

.azki-footer__aurora--2 {
	width: 420px;
	height: 420px;
	bottom: -35%;
	inset-inline-end: -8%;
	background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--azki-accent, #00b7ff) 14%, transparent), transparent 62%);
	opacity: 0.45;
}

.azki-footer__mesh {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(color-mix(in srgb, var(--azki-primary) 12%, transparent) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
	opacity: 0.5;
}

/* Deep blue brand panel */
.azki-footer__panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(ellipse 75% 90% at 88% -15%, color-mix(in srgb, var(--azki-accent, #00b7ff) 38%, transparent), transparent 58%),
		radial-gradient(ellipse 50% 65% at 4% 115%, rgba(120, 190, 255, 0.22), transparent 55%),
		linear-gradient(140deg, var(--azki-primary) 0%, var(--azki-primary-dark, #0052d4) 58%, #04275e 100%);
	border: 1px solid color-mix(in srgb, var(--azki-accent, #00b7ff) 30%, transparent);
	border-radius: 30px;
	box-shadow:
		0 30px 70px color-mix(in srgb, var(--azki-primary) 30%, transparent),
		0 2px 10px rgba(10, 30, 70, 0.12);
	padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3.25rem) 0;
}

/* Cyan glow inside top corner */
.azki-footer__panel-glow {
	position: absolute;
	top: -120px;
	inset-inline-end: -80px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-accent, #00b7ff) 42%, transparent) 0%, transparent 68%);
	filter: blur(30px);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: -1;
}

/* Dashed orbit ring */
.azki-footer__panel-ring {
	position: absolute;
	top: -70px;
	inset-inline-start: -70px;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	border: 1.5px dashed rgba(160, 210, 255, 0.3);
	pointer-events: none;
	z-index: -1;
}

/* Dot pattern bottom corner */
.azki-footer__panel-dots {
	position: absolute;
	bottom: 8%;
	inset-inline-end: 3%;
	width: 130px;
	height: 130px;
	background-image: radial-gradient(rgba(170, 215, 255, 0.4) 1.5px, transparent 1.5px);
	background-size: 14px 14px;
	mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
	pointer-events: none;
	z-index: -1;
}

.azki-footer a {
	color: rgba(210, 230, 255, 0.8);
	transition: color var(--azki-transition), transform var(--azki-transition);
}

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

.azki-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 1024px) {
	.azki-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.azki-footer__grid {
		grid-template-columns: 1fr;
	}
}

.azki-footer__desc {
	font-size: var(--azki-font-size-sm);
	line-height: 1.95;
	color: rgba(205, 226, 255, 0.75);
	max-width: 20rem;
	margin-bottom: var(--azki-space-5);
}

/* Email pill — glass on blue */
.azki-footer__email {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(160, 210, 255, 0.35);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 0.8125rem;
	font-weight: 600;
	color: #fff !important;
	direction: ltr;
	transition: background var(--azki-transition), border-color var(--azki-transition), transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.azki-footer__email:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(200, 232, 255, 0.65);
	transform: translateY(-2px);
}

.azki-footer__title {
	font-size: var(--azki-font-size-sm);
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--azki-space-5);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.azki-footer__title::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 3px;
	background: linear-gradient(135deg, var(--azki-accent, #00b7ff), #9fd8ff);
	transform: rotate(45deg);
	flex-shrink: 0;
	box-shadow: 0 0 10px color-mix(in srgb, var(--azki-accent, #00b7ff) 60%, transparent);
}

.azki-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.azki-footer__links li {
	margin-bottom: var(--azki-space-3);
}

.azki-footer__links a {
	display: inline-block;
	font-size: var(--azki-font-size-sm);
	font-weight: 500;
}

.azki-footer__col .azki-footer__links a:hover {
	transform: translateX(-4px);
}

.azki-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--azki-space-4);
	padding-block: var(--azki-space-5);
	border-top: 1px solid rgba(160, 210, 255, 0.18);
	font-size: var(--azki-font-size-xs);
	color: rgba(195, 220, 250, 0.6);
}

.azki-footer__bottom p {
	margin: 0;
}

.azki-footer__bottom .azki-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-5);
}

.azki-footer__bottom .azki-footer__links li {
	margin-bottom: 0;
}

.azki-footer__bottom .azki-footer__links a {
	font-size: var(--azki-font-size-xs);
	font-weight: 400;
	color: rgba(195, 220, 250, 0.6);
}

/* Brand inside blue panel */
.azki-footer .azki-brand--footer {
	color: #fff;
}

.azki-footer .azki-brand--footer .azki-brand__accent {
	color: #8fd4ff;
}

/* Mobile — compact panel with collapsible columns */
@media (max-width: 640px) {
	.azki-footer {
		padding-top: var(--azki-space-10);
	}

	.azki-footer__panel {
		border-radius: 22px;
		padding: var(--azki-space-6) var(--azki-space-5) 0;
	}

	.azki-footer__grid {
		gap: 0;
		padding-bottom: var(--azki-space-4);
	}

	.azki-footer__brand {
		padding-bottom: var(--azki-space-5);
	}

	.azki-footer__desc {
		font-size: var(--azki-font-size-xs);
		line-height: 1.85;
		margin-bottom: var(--azki-space-4);
	}

	.azki-footer__col {
		border-top: 1px solid rgba(160, 210, 255, 0.16);
	}

	.azki-footer__col > .azki-footer__title {
		margin: 0;
		padding-block: var(--azki-space-4);
		cursor: pointer;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* Chevron */
	.azki-footer__col > .azki-footer__title::after {
		content: '';
		width: 8px;
		height: 8px;
		margin-inline-start: auto;
		border-inline-end: 2px solid rgba(200, 228, 255, 0.7);
		border-block-end: 2px solid rgba(200, 228, 255, 0.7);
		transform: rotate(45deg) translateY(-2px);
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
		flex-shrink: 0;
	}

	.azki-footer__col.is-open > .azki-footer__title::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.azki-footer__col > .azki-footer__links {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.azki-footer__col.is-open > .azki-footer__links {
		max-height: 320px;
	}

	.azki-footer__col > .azki-footer__links li:last-child {
		padding-bottom: var(--azki-space-4);
	}

	.azki-footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--azki-space-3);
		padding-block: var(--azki-space-4);
	}

	.azki-footer__bottom .azki-footer__links {
		justify-content: center;
	}

	.azki-footer__panel-dots,
	.azki-footer__panel-ring {
		display: none;
	}
}

/* ==========================================================================
   9. Hero — light spotlight / modern SaaS
   ========================================================================== */

.azki-hero {
	--hero-title: clamp(2.1rem, 4.4vw, 3.1rem);
	--hero-lead: 1.0625rem;
	--hero-radius: 18px;
	--hero-ink: var(--azki-gray-900, #0f172a);
	--hero-ink-muted: var(--azki-text-muted, #5b6b84);
	--hero-line: color-mix(in srgb, var(--azki-primary) 10%, transparent);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background:
		radial-gradient(ellipse 90% 70% at 78% -10%, color-mix(in srgb, var(--azki-primary) 13%, transparent), transparent 55%),
		radial-gradient(ellipse 70% 60% at 8% 110%, color-mix(in srgb, var(--azki-accent, #00b7ff) 9%, transparent), transparent 58%),
		linear-gradient(168deg, #fbfdff 0%, #f2f7ff 48%, #f6faff 100%);
	color: var(--hero-ink);
}

.azki-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.azki-hero__aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	will-change: transform;
}

.azki-hero__aurora--1 {
	width: min(640px, 90vw);
	height: min(640px, 90vw);
	top: -35%;
	inset-inline-end: -14%;
	background:
		radial-gradient(circle at 40% 60%, color-mix(in srgb, var(--azki-primary) 22%, transparent), transparent 65%);
	opacity: 0.6;
	animation: azki-hero-aurora 16s ease-in-out infinite alternate;
}

.azki-hero__aurora--2 {
	width: 420px;
	height: 420px;
	bottom: -30%;
	inset-inline-start: -8%;
	background:
		radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--azki-accent, #00b7ff) 18%, transparent), transparent 62%);
	opacity: 0.55;
	animation: azki-hero-aurora 20s ease-in-out infinite alternate-reverse;
}

.azki-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--hero-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 85% 80% at 50% 15%, black 25%, transparent 78%);
}

.azki-hero__noise {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.azki-hero__inner {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	position: relative;
	z-index: 1;
}

.azki-hero__content {
	text-align: right;
	max-width: 36rem;
}

/* Staggered entrance */
.azki-hero__badge,
.azki-hero__title,
.azki-hero__desc,
.azki-hero__actions,
.azki-hero__stats-bar {
	opacity: 0;
	animation: azki-hero-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.azki-hero__badge { animation-delay: 0.05s; }
.azki-hero__title { animation-delay: 0.15s; }
.azki-hero__desc { animation-delay: 0.25s; }
.azki-hero__actions { animation-delay: 0.35s; }
.azki-hero__stats-bar { animation-delay: 0.45s; }

/* Badge */
.azki-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 1rem;
	margin-bottom: var(--azki-space-6);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 20%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		0 1px 3px rgba(15, 23, 42, 0.05),
		0 0 0 4px color-mix(in srgb, var(--azki-primary) 4%, transparent);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--azki-primary-dark, var(--azki-primary));
}

.azki-hero__badge-pulse {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--azki-primary);
	flex-shrink: 0;
}

.azki-hero__badge-pulse::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--azki-primary) 60%, transparent);
	animation: azki-hero-pulse 2.2s ease-out infinite;
}

/* Title */
.azki-hero__title {
	display: flex;
	flex-direction: column;
	gap: 0.08em;
	margin: 0 0 var(--azki-space-5);
	font-size: var(--hero-title);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--hero-ink);
	text-wrap: balance;
}

.azki-hero__title-line {
	display: block;
}

.azki-hero__title em {
	position: relative;
	display: inline-block;
	font-style: normal;
	background: linear-gradient(100deg, var(--azki-primary-dark, #0052d4) 0%, var(--azki-primary) 45%, var(--azki-accent, #00b7ff) 95%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.18em;
}

.azki-hero__title-scribble {
	position: absolute;
	bottom: 0;
	left: 4%;
	width: 92%;
	height: 0.22em;
	color: color-mix(in srgb, var(--azki-accent, #00b7ff) 55%, transparent);
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	animation: azki-hero-scribble 0.9s ease-out 0.7s forwards;
}

.azki-hero__desc {
	max-width: 32rem;
	margin: 0 0 var(--azki-space-7);
	font-size: var(--hero-lead);
	line-height: 1.95;
	color: var(--hero-ink-muted);
}

/* CTAs */
.azki-hero__actions {
	margin-top: var(--azki-space-4);
	margin-bottom: var(--azki-space-8);
	gap: var(--azki-space-3);
}

.azki-hero__btn-primary,
.azki-hero__btn-secondary {
	min-height: 50px;
	padding-inline: 1.5rem;
	border-radius: 14px;
	font-weight: 700;
	font-size: 0.9375rem;
}

.azki-hero__btn-primary {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, var(--azki-primary) 0%, var(--azki-primary-dark, #0065ff) 100%);
	border: 1px solid transparent;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.12) inset,
		0 10px 26px color-mix(in srgb, var(--azki-primary) 32%, transparent);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

/* Shine sweep */
.azki-hero__btn-primary::after {
	content: '';
	position: absolute;
	top: 0;
	inset-inline-start: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	transition: inset-inline-start 0.6s ease;
	pointer-events: none;
}

.azki-hero__btn-primary:hover {
	transform: translateY(-3px);
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.16) inset,
		0 18px 38px color-mix(in srgb, var(--azki-primary) 45%, transparent);
}

.azki-hero__btn-primary:hover::after {
	inset-inline-start: 125%;
}

.azki-hero__btn-primary svg {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.azki-hero__btn-primary:hover svg {
	transform: translateX(-4px);
}

.azki-hero__btn-secondary {
	color: var(--azki-primary);
	background: rgba(255, 255, 255, 0.85);
	border: 1.5px solid color-mix(in srgb, var(--azki-primary) 65%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.azki-hero__btn-secondary:hover {
	color: var(--azki-primary-dark, var(--azki-primary));
	background: color-mix(in srgb, var(--azki-primary) 6%, #fff);
	border-color: var(--azki-primary);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

/* Stats */
.azki-hero__stats-bar {
	position: relative;
	display: flex;
	align-items: stretch;
	max-width: 36rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 14%, var(--azki-border, #e5e7eb));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

.azki-hero__stat-item {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	padding: 1rem 0.9rem;
	text-align: start;
	transition: background 0.25s ease;
}

.azki-hero__stat-item:hover {
	background: color-mix(in srgb, var(--azki-primary) 4%, transparent);
}

.azki-hero__stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	color: var(--azki-primary);
	background: color-mix(in srgb, var(--azki-primary) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 14%, transparent);
	flex-shrink: 0;
}

.azki-hero__stat-icon svg {
	display: block;
}

.azki-hero__stat-sep {
	width: 1px;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--azki-primary) 24%, transparent), transparent);
	flex-shrink: 0;
}

.azki-hero__stat-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.azki-hero__stat-text strong {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.15;
	background: linear-gradient(100deg, var(--azki-primary-dark, #0052d4) 0%, var(--azki-accent, #00b7ff) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.azki-hero__stat-text span {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--hero-ink-muted);
	white-space: nowrap;
}

@keyframes azki-hero-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes azki-hero-scribble {
	to { stroke-dashoffset: 0; }
}

/* Visual — layered composition */
.azki-hero__visual {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: clamp(440px, 58vh, 570px);
}

.azki-hero__stage {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	max-width: 440px;
	min-height: inherit;
}

/* Organic gradient blob behind mascot */
.azki-hero__blob {
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
	width: min(92%, 360px);
	aspect-ratio: 0.94;
	border-radius: 47% 53% 52% 48% / 58% 55% 45% 42%;
	background: linear-gradient(155deg,
		color-mix(in srgb, var(--azki-accent, #00b7ff) 80%, #fff) 0%,
		var(--azki-primary) 45%,
		var(--azki-primary-dark, #0052d4) 100%);
	box-shadow:
		0 30px 60px color-mix(in srgb, var(--azki-primary) 30%, transparent),
		0 0 0 10px color-mix(in srgb, var(--azki-primary) 6%, transparent);
	z-index: 0;
	animation: azki-hero-blob 14s ease-in-out infinite;
}

.azki-hero__blob::after {
	content: '';
	position: absolute;
	inset: 6% 10% 40% 45%;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 65%);
	pointer-events: none;
}

/* Rotating dashed ring */
.azki-hero__ring {
	position: absolute;
	left: 50%;
	bottom: 1%;
	transform: translateX(-50%);
	width: min(108%, 425px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px dashed color-mix(in srgb, var(--azki-primary) 32%, transparent);
	z-index: 0;
	animation: azki-hero-spin 50s linear infinite;
}

.azki-hero__ring::before {
	content: '';
	position: absolute;
	top: 7%;
	left: 14%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--azki-accent, #00b7ff);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--azki-accent, #00b7ff) 18%, transparent);
}

.azki-hero__ring::after {
	content: '';
	position: absolute;
	bottom: 12%;
	right: 8%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffb020;
	box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.2);
}

/* Dot pattern accent */
.azki-hero__dots {
	position: absolute;
	top: 12%;
	inset-inline-start: -2%;
	width: 110px;
	height: 110px;
	background-image: radial-gradient(color-mix(in srgb, var(--azki-primary) 35%, transparent) 1.5px, transparent 1.5px);
	background-size: 14px 14px;
	mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
	z-index: 0;
}

.azki-hero__stage-shadow {
	position: absolute;
	left: 50%;
	bottom: 2%;
	width: 54%;
	height: 18px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.22) 0%, transparent 70%);
	filter: blur(4px);
	z-index: 1;
	pointer-events: none;
}

/* Floating glass chips */
.azki-hero__chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.9rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow:
		0 10px 26px rgba(15, 23, 42, 0.12),
		0 2px 6px rgba(15, 23, 42, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: 0.75rem;
	color: var(--azki-text-muted, #64748b);
	white-space: nowrap;
	z-index: 3;
}

.azki-hero__chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--azki-primary) 12%, #fff);
	color: var(--azki-primary);
	flex-shrink: 0;
}

.azki-hero__chip-icon--gold {
	background: rgba(255, 176, 32, 0.16);
	color: #d98a00;
}

.azki-hero__chip-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.4;
}

.azki-hero__chip-text strong {
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--azki-gray-900, #0f172a);
}

.azki-hero__chip--1 {
	top: 16%;
	inset-inline-end: -6%;
	animation: azki-hero-float 6s ease-in-out infinite;
}

.azki-hero__chip--2 {
	top: 47%;
	inset-inline-start: -9%;
	animation: azki-hero-float 7s ease-in-out 0.8s infinite;
}

.azki-hero__chip--3 {
	bottom: 9%;
	inset-inline-end: -3%;
	gap: 0.45rem;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--azki-gray-800, #1f2937);
	animation: azki-hero-float 6.5s ease-in-out 1.6s infinite;
}

.azki-hero__chip-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #10b981;
	color: #fff;
	flex-shrink: 0;
}

.azki-hero__mascot {
	position: relative;
	z-index: 2;
	margin: 0;
	width: 100%;
	max-width: 320px;
	display: flex;
	justify-content: center;
}

.azki-hero__mascot-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: clamp(400px, 55vh, 530px);
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 22px 34px rgba(10, 30, 70, 0.28));
	user-select: none;
	pointer-events: none;
}

.azki-hero__figure {
	position: relative;
	z-index: 2;
	margin: 0;
	width: 100%;
	border-radius: var(--hero-radius);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--azki-primary) 16%, var(--azki-border, #e5e7eb));
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.azki-hero__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@keyframes azki-hero-blob {
	0%, 100% { border-radius: 47% 53% 52% 48% / 58% 55% 45% 42%; }
	50% { border-radius: 52% 48% 46% 54% / 52% 60% 40% 48%; }
}

@keyframes azki-hero-spin {
	to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes azki-hero-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes azki-hero-aurora {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-4%, 5%, 0) scale(1.08); }
}

@keyframes azki-hero-glow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

@keyframes azki-hero-pulse {
	0% { transform: scale(0.6); opacity: 1; }
	100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.azki-hero__aurora,
	.azki-hero__blob,
	.azki-hero__ring,
	.azki-hero__chip,
	.azki-hero__badge-pulse::after {
		animation: none !important;
	}

	.azki-hero__badge,
	.azki-hero__title,
	.azki-hero__desc,
	.azki-hero__actions,
	.azki-hero__stats-bar {
		animation: none !important;
		opacity: 1;
	}

	.azki-hero__title-scribble {
		animation: none !important;
		stroke-dashoffset: 0;
	}
}

/* Tablet — stack layout */
@media (max-width: 900px) {
	.azki-hero {
		--hero-title: clamp(1.8rem, 5.5vw, 2.3rem);
		--hero-lead: 1rem;
		padding-block: clamp(2.25rem, 6vw, 3.25rem);
	}

	.azki-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--azki-space-8);
	}

	.azki-hero__content {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: none;
	}

	.azki-hero__badge {
		margin-inline: auto;
	}

	.azki-hero__title {
		width: 100%;
		align-items: center;
	}

	.azki-hero__desc {
		margin-inline: auto;
		max-width: 36rem;
	}

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

	.azki-hero__stats-bar {
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
	}

	.azki-hero__visual {
		order: -1;
		width: 100%;
		max-width: 340px;
		min-height: 380px;
		margin-inline: auto;
	}

	.azki-hero__stage {
		max-width: 310px;
		min-height: 380px;
	}

	.azki-hero__mascot {
		max-width: 245px;
	}

	.azki-hero__mascot-img {
		max-height: 345px;
	}

	.azki-hero__dots {
		display: none;
	}

	.azki-hero__chip--1 {
		inset-inline-end: -4%;
	}

	.azki-hero__chip--2 {
		inset-inline-start: -6%;
	}
}

@media (max-width: 560px) {
	.azki-hero {
		--hero-title: clamp(1.55rem, 7vw, 1.9rem);
		padding-block: var(--azki-space-8) var(--azki-space-10);
	}

	.azki-hero__stat-item {
		gap: 0.45rem;
		padding: 0.75rem 0.45rem;
	}

	.azki-hero__stat-icon {
		width: 1.75rem;
		height: 1.75rem;
	}

	.azki-hero__stat-icon svg {
		width: 14px;
		height: 14px;
	}

	.azki-hero__stat-text strong {
		font-size: 1.05rem;
	}

	.azki-hero__stat-text span {
		font-size: 0.625rem;
	}

	.azki-hero__visual {
		max-width: 290px;
		min-height: 330px;
	}

	.azki-hero__mascot {
		max-width: 215px;
	}

	.azki-hero__mascot-img {
		max-height: 305px;
	}

	.azki-hero__chip {
		padding: 0.45rem 0.7rem;
		font-size: 0.6875rem;
	}

	.azki-hero__chip-icon {
		width: 28px;
		height: 28px;
	}

	.azki-hero__chip-text strong {
		font-size: 0.75rem;
	}

	.azki-hero__chip--1 {
		inset-inline-end: -2%;
	}

	.azki-hero__chip--2 {
		inset-inline-start: -3%;
	}
}

/* ==========================================================================
   10. Learning Paths
   ========================================================================== */

.azki-path-card {
	position: relative;
	padding: var(--azki-space-8);
	background: linear-gradient(170deg, var(--azki-white) 0%, color-mix(in srgb, var(--azki-primary) 3%, var(--azki-white)) 100%);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 12%, var(--azki-border));
	border-radius: var(--azki-radius-xl, 20px);
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Big ghost number in the corner */
.azki-path-card::after {
	content: '';
	position: absolute;
	top: -34px;
	inset-inline-end: -20px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-primary) 8%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.azki-path-card:hover {
	border-color: color-mix(in srgb, var(--azki-primary) 38%, transparent);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--azki-primary) 14%, transparent);
	transform: translateY(-6px);
}

.azki-path-card__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: linear-gradient(135deg, var(--azki-primary) 0%, var(--azki-primary-dark, #0052d4) 100%);
	color: var(--azki-white);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-bold);
	border-radius: 12px;
	margin-bottom: var(--azki-space-5);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--azki-primary) 26%, transparent);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.azki-path-card:hover .azki-path-card__step {
	transform: scale(1.08) rotate(-4deg);
}

.azki-path-card__title {
	font-size: var(--azki-font-size-xl);
	font-weight: 700;
	margin-bottom: var(--azki-space-2);
}

.azki-path-card__desc {
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	line-height: 1.8;
	margin-bottom: var(--azki-space-5);
}

.azki-path-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-path-card__meta span {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--azki-primary) 7%, transparent);
	color: var(--azki-primary-dark, var(--azki-primary));
	font-weight: 500;
}

/* ==========================================================================
   11. Categories / Topics
   ========================================================================== */

.azki-category-pill {
	display: flex;
	align-items: center;
	gap: var(--azki-space-3);
	padding: var(--azki-space-4) var(--azki-space-5);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-lg);
	text-decoration: none;
	color: inherit;
	transition: all var(--azki-transition);
}

.azki-category-pill:hover {
	border-color: var(--azki-primary);
	background: var(--azki-primary-50);
	color: inherit;
}

.azki-category-pill__icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--azki-primary-50);
	color: var(--azki-primary);
	border-radius: var(--azki-radius);
	flex-shrink: 0;
}

.azki-category-pill__name {
	font-weight: var(--azki-font-weight-semibold);
}

.azki-category-pill__count {
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-topics__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--azki-space-4);
}

@media (min-width: 900px) {
	.azki-topics__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--azki-space-5);
	}
}

.azki-topic-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--azki-space-4);
	min-height: 180px;
	padding: var(--azki-space-5);
	text-decoration: none;
	color: inherit;
	background:
		linear-gradient(160deg, var(--azki-white) 0%, var(--azki-primary-50) 100%);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 14%, var(--azki-border));
	border-radius: var(--azki-radius-xl, 20px);
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.azki-topic-card::before {
	content: '';
	position: absolute;
	inset-inline-end: -20%;
	top: -30%;
	width: 55%;
	height: 70%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-primary) 18%, transparent), transparent 70%);
	pointer-events: none;
}

.azki-topic-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--azki-primary) 45%, var(--azki-border));
	box-shadow: var(--azki-shadow-primary, 0 8px 24px rgba(0, 146, 255, 0.18));
	color: inherit;
}

.azki-topic-card__index {
	position: absolute;
	inset-inline-end: var(--azki-space-4);
	top: var(--azki-space-4);
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: color-mix(in srgb, var(--azki-primary) 22%, transparent);
	user-select: none;
}

.azki-topic-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--azki-white);
	color: var(--azki-primary);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 16%, var(--azki-border));
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
	z-index: 1;
}

.azki-topic-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: auto;
	z-index: 1;
	padding-left: 2.75rem;
}

.azki-topic-card__name {
	font-size: var(--azki-font-size-lg, 1.125rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--azki-text, #0f172a);
}

.azki-topic-card__desc {
	font-size: var(--azki-font-size-sm, 0.875rem);
	line-height: 1.6;
	color: var(--azki-text-muted, #64748b);
}

.azki-topic-card__count {
	display: inline-flex;
	align-items: center;
	margin-top: 0.35rem;
	font-size: var(--azki-font-size-xs, 0.75rem);
	font-weight: 600;
	color: var(--azki-primary-dark, var(--azki-primary));
}

.azki-topic-card__arrow {
	position: absolute;
	left: var(--azki-space-5);
	right: auto;
	bottom: var(--azki-space-5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--azki-white);
	color: var(--azki-primary);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 18%, var(--azki-border));
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.azki-topic-card:hover .azki-topic-card__arrow {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 640px) {
	.azki-topics__grid {
		grid-template-columns: 1fr;
	}

	.azki-topic-card {
		min-height: 150px;
	}

	.azki-topic-card__arrow {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   12. FAQ Accordion
   ========================================================================== */

.azki-faq__item {
	border: 1px solid color-mix(in srgb, var(--azki-primary) 10%, var(--azki-border));
	border-radius: var(--azki-radius-lg, 16px);
	margin-bottom: var(--azki-space-3);
	overflow: hidden;
	background: var(--azki-white);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.azki-faq__item.is-open {
	border-color: color-mix(in srgb, var(--azki-primary) 38%, transparent);
	box-shadow: 0 12px 30px color-mix(in srgb, var(--azki-primary) 10%, transparent);
}

.azki-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--azki-space-5) var(--azki-space-6);
	background: none;
	border: none;
	font-size: var(--azki-font-size-base);
	font-weight: 600;
	color: var(--azki-gray-800);
	cursor: pointer;
	text-align: right;
	transition: background var(--azki-transition), color var(--azki-transition);
}

.azki-faq__question:hover {
	background: color-mix(in srgb, var(--azki-primary) 4%, transparent);
	color: var(--azki-primary-dark, var(--azki-primary));
}

.azki-faq__item.is-open .azki-faq__question {
	color: var(--azki-primary-dark, var(--azki-primary));
}

.azki-faq__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--azki-primary) 8%, transparent);
	transition: transform var(--azki-transition), background var(--azki-transition), color var(--azki-transition);
	color: var(--azki-primary);
}

.azki-faq__item.is-open .azki-faq__icon {
	transform: rotate(180deg);
	background: var(--azki-primary);
	color: var(--azki-white);
}

.azki-faq__answer {
	display: none;
	padding: 0 var(--azki-space-6) var(--azki-space-5);
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	line-height: var(--azki-line-height-relaxed);
}

.azki-faq__item.is-open .azki-faq__answer {
	display: block;
}

.azki-faq__question-text {
	flex: 1;
	padding-inline-end: var(--azki-space-4, 16px);
}

.azki-faq-page__intro {
	margin-bottom: var(--azki-space-10, 40px);
}

.azki-faq-page__help {
	margin-top: var(--azki-space-12, 48px);
	padding: var(--azki-space-8, 32px) var(--azki-space-6, 24px);
	text-align: center;
	background: linear-gradient(160deg, var(--azki-white) 0%, var(--azki-primary-50) 100%);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 14%, var(--azki-border));
	border-radius: var(--azki-radius-xl, 20px);
}

.azki-faq-page__help-title {
	margin: 0 0 var(--azki-space-2, 8px);
	font-size: var(--azki-font-size-xl, 1.25rem);
	font-weight: 700;
	color: var(--azki-text, #0f172a);
}

.azki-faq-page__help-desc {
	margin: 0 0 var(--azki-space-6, 24px);
	color: var(--azki-text-muted, #64748b);
	font-size: var(--azki-font-size-sm, 0.875rem);
}

.azki-faq--page .azki-faq__item {
	border-radius: var(--azki-radius-lg, 16px);
	margin-bottom: var(--azki-space-4, 16px);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.azki-faq--page .azki-faq__question {
	font-size: var(--azki-font-size-lg, 1.05rem);
	font-weight: 600;
	padding: var(--azki-space-5, 20px) var(--azki-space-6, 24px);
}

.azki-faq--page .azki-faq__answer {
	font-size: var(--azki-font-size-base, 1rem);
	line-height: 1.85;
}

/* ==========================================================================
   13. CTA Section
   ========================================================================== */

.azki-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: var(--azki-space-16);
	padding-inline: var(--azki-space-6);
	background:
		radial-gradient(ellipse 70% 90% at 85% -20%, color-mix(in srgb, var(--azki-accent, #00b7ff) 40%, transparent), transparent 60%),
		radial-gradient(ellipse 55% 70% at 10% 120%, rgba(255, 255, 255, 0.14), transparent 55%),
		linear-gradient(135deg, var(--azki-primary) 0%, var(--azki-primary-dark) 100%);
	color: var(--azki-white);
	text-align: center;
	border-radius: 28px;
	margin-inline: var(--azki-space-6);
	box-shadow: 0 24px 56px color-mix(in srgb, var(--azki-primary) 32%, transparent);
}

/* Decorative ring + dots inside CTA */
.azki-cta::before {
	content: '';
	position: absolute;
	top: -90px;
	inset-inline-start: -70px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 1.5px dashed rgba(255, 255, 255, 0.22);
	pointer-events: none;
	z-index: -1;
}

.azki-cta::after {
	content: '';
	position: absolute;
	bottom: 8%;
	inset-inline-end: 4%;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px);
	background-size: 14px 14px;
	mask-image: radial-gradient(circle at center, black 40%, transparent 75%);
	pointer-events: none;
	z-index: -1;
}

.azki-cta__title {
	font-size: var(--azki-font-size-3xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--azki-white);
	margin-bottom: var(--azki-space-4);
}

.azki-cta__desc {
	font-size: var(--azki-font-size-lg);
	opacity: 0.92;
	line-height: 1.9;
	max-width: 560px;
	margin-inline: auto;
	margin-bottom: var(--azki-space-8);
}

.azki-cta .azki-btn--secondary {
	background: var(--azki-white);
	border-color: var(--azki-white);
	color: var(--azki-primary-dark);
	font-weight: 700;
	border-radius: 14px;
	box-shadow: 0 10px 26px rgba(0, 10, 30, 0.22);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.azki-cta .azki-btn--secondary:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(0, 10, 30, 0.3);
	color: var(--azki-primary-dark);
	background: var(--azki-white);
}

.azki-cta .azki-btn--ghost {
	color: var(--azki-white);
	border-color: rgba(255, 255, 255, 0.45);
	border-radius: 14px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease;
}

.azki-cta .azki-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--azki-white);
	color: var(--azki-white);
	transform: translateY(-3px);
}

/* ==========================================================================
   14. Page Templates (Internal)
   ========================================================================== */

.azki-page-header {
	padding-block: var(--azki-space-12);
	background: var(--azki-bg-alt);
	border-bottom: 1px solid var(--azki-border);
}

.azki-page-header__title {
	font-size: var(--azki-font-size-3xl);
	margin-bottom: var(--azki-space-3);
}

.azki-page-header__desc {
	font-size: var(--azki-font-size-lg);
	color: var(--azki-text-muted);
	margin-bottom: 0;
	max-width: 640px;
}

.azki-page-content {
	padding-block: var(--azki-space-12);
}

.azki-page-content .entry-content {
	max-width: var(--azki-container-narrow);
}

.azki-page-content .entry-content > *:first-child {
	margin-top: 0;
}

/* Breadcrumbs */
.azki-breadcrumbs {
	padding-block: var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
}

.azki-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
	align-items: center;
}

.azki-breadcrumbs__item:not(:last-child)::after {
	content: '/';
	margin-inline-start: var(--azki-space-2);
	color: var(--azki-gray-400);
}

.azki-breadcrumbs a {
	color: var(--azki-text-muted);
}

.azki-breadcrumbs a:hover {
	color: var(--azki-primary);
}

/* Blog / Archive */
.azki-archive-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--azki-space-10);
}

@media (max-width: 900px) {
	.azki-archive-layout {
		grid-template-columns: 1fr;
	}
}

.azki-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	margin-bottom: var(--azki-space-4);
}

.azki-single-post .entry-header {
	margin-bottom: var(--azki-space-8);
}

.azki-single-post .entry-title {
	font-size: var(--azki-font-size-3xl);
}

.azki-single-post .entry-featured-image {
	border-radius: var(--azki-radius-lg);
	overflow: hidden;
	margin-bottom: var(--azki-space-8);
}

.azki-single-post .entry-content {
	font-size: var(--azki-font-size-lg);
	line-height: var(--azki-line-height-relaxed);
}

.azki-single-post .entry-content h2,
.azki-single-post .entry-content h3 {
	margin-top: var(--azki-space-8);
}

/* 404 */
.azki-404 {
	text-align: center;
	padding-block: var(--azki-space-24);
}

.azki-404__code {
	font-size: 8rem;
	font-weight: var(--azki-font-weight-bold);
	color: var(--azki-primary-light);
	line-height: 1;
	margin-bottom: var(--azki-space-4);
}

.azki-404__title {
	margin-bottom: var(--azki-space-4);
}

.azki-404__desc {
	color: var(--azki-text-muted);
	max-width: 480px;
	margin-inline: auto;
	margin-bottom: var(--azki-space-8);
}

/* Search page */
.azki-page-header--search .azki-page-header__title {
	margin-bottom: var(--azki-space-2);
}

.azki-search-toolbar {
	margin-bottom: var(--azki-space-8);
}

.azki-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
	margin-top: var(--azki-space-4);
}

.azki-search-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--azki-space-2);
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--azki-border);
	background: var(--azki-white);
	color: var(--azki-gray-600);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	text-decoration: none;
	transition: all var(--azki-transition);
}

.azki-search-filter:hover {
	border-color: color-mix(in srgb, var(--azki-primary) 30%, transparent);
	color: var(--azki-primary-dark);
}

.azki-search-filter.is-active {
	background: var(--azki-primary);
	border-color: var(--azki-primary);
	color: var(--azki-white);
}

.azki-search-filter.is-empty:not(.is-active) {
	opacity: 0.55;
}

.azki-search-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 0.6875rem;
	line-height: 1.6;
}

.azki-search-filter.is-active .azki-search-filter__count {
	background: rgba(255, 255, 255, 0.2);
}

.azki-search-results {
	display: flex;
	flex-direction: column;
	gap: var(--azki-space-3);
}

.azki-search-result {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--azki-space-4);
	padding: var(--azki-space-4);
	border: 1px solid var(--azki-border);
	border-radius: 14px;
	background: var(--azki-white);
	transition: border-color var(--azki-transition), box-shadow var(--azki-transition), transform var(--azki-transition);
}

.azki-search-result:hover {
	border-color: color-mix(in srgb, var(--azki-primary) 35%, transparent);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--azki-primary) 8%, transparent);
	transform: translateY(-1px);
}

.azki-search-result__media {
	flex-shrink: 0;
}

.azki-search-result__thumb {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	object-fit: cover;
}

.azki-search-result__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	background: var(--azki-primary-50);
	color: var(--azki-primary);
}

.azki-search-result__body {
	min-width: 0;
}

.azki-search-result__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--azki-space-2);
	margin-bottom: var(--azki-space-2);
}

.azki-search-result__type {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--azki-primary-50);
	color: var(--azki-primary-dark);
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-semibold);
}

.azki-search-result__date {
	font-size: var(--azki-font-size-xs);
	color: var(--azki-text-muted);
}

.azki-search-result__title {
	font-size: var(--azki-font-size-lg);
	margin-bottom: var(--azki-space-2);
	line-height: var(--azki-line-height-tight);
}

.azki-search-result__title a {
	color: inherit;
	text-decoration: none;
}

.azki-search-result__title a:hover {
	color: var(--azki-primary);
}

.azki-search-result__excerpt {
	font-size: var(--azki-font-size-sm);
	color: var(--azki-text-muted);
	margin-bottom: 0;
	line-height: var(--azki-line-height-normal);
}

.azki-search-result__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	color: var(--azki-gray-400);
	transition: background var(--azki-transition), color var(--azki-transition);
}

.azki-search-result:hover .azki-search-result__arrow {
	background: var(--azki-primary-50);
	color: var(--azki-primary);
}

.azki-search-highlight {
	background: color-mix(in srgb, var(--azki-primary) 18%, transparent);
	color: inherit;
	border-radius: 3px;
	padding: 0 2px;
}

.azki-empty--search .azki-empty__icon {
	color: var(--azki-gray-300);
	margin-bottom: var(--azki-space-4);
}

.azki-empty--search .azki-empty__title {
	font-size: var(--azki-font-size-xl);
	margin-bottom: var(--azki-space-2);
	color: var(--azki-gray-800);
}

.azki-empty--search .azki-empty__desc {
	max-width: 420px;
	margin: 0 auto var(--azki-space-6);
}

.azki-empty--search .azki-search-overlay__chips {
	justify-content: center;
}

@media (max-width: 640px) {
	.azki-search-result {
		grid-template-columns: auto 1fr;
	}

	.azki-search-result__arrow {
		display: none;
	}

	.azki-search-overlay__dialog {
		padding: var(--azki-space-4);
		border-radius: 16px;
	}

	.azki-search-overlay__shortcut {
		display: none;
	}

	.azki-search-form__submit {
		padding-inline: var(--azki-space-3);
	}
}

/* Pagination */
.azki-pagination {
	display: flex;
	justify-content: center;
	gap: var(--azki-space-2);
	margin-top: var(--azki-space-10);
}

.azki-pagination a,
.azki-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--azki-space-3);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius);
	font-size: var(--azki-font-size-sm);
	color: var(--azki-gray-700);
}

.azki-pagination a:hover {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
}

.azki-pagination .current {
	background: var(--azki-primary);
	border-color: var(--azki-primary);
	color: var(--azki-white);
}

/* Contact page */
.azki-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--azki-space-12);
}

@media (max-width: 768px) {
	.azki-contact-grid {
		grid-template-columns: 1fr;
	}
}

.azki-contact-info__item {
	display: flex;
	gap: var(--azki-space-4);
	margin-bottom: var(--azki-space-6);
}

.azki-contact-info__icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--azki-primary-50);
	color: var(--azki-primary);
	border-radius: var(--azki-radius);
	flex-shrink: 0;
}

/* Elementor compatibility — don't override Elementor widgets */
.azki-elementor-page .elementor-widget-container {
	font-family: var(--azki-font);
}

.elementor-page .azki-page-content {
	padding-block: 0;
}

/* Skip link */
.azki-skip-link {
	position: absolute;
	top: -100%;
	inset-inline-start: var(--azki-space-4);
	z-index: 9999;
	padding: var(--azki-space-3) var(--azki-space-4);
	background: var(--azki-primary);
	color: var(--azki-white);
	border-radius: var(--azki-radius);
}

.azki-skip-link:focus {
	top: var(--azki-space-4);
}

/* Main content area */
.azki-main {
	min-height: 50vh;
}

/* Empty state */
.azki-empty {
	text-align: center;
	padding: var(--azki-space-16);
	color: var(--azki-text-muted);
}


/* ==========================================================================
   Articles page template
   ========================================================================== */

.azki-articles-hero {
	position: relative;
	overflow: hidden;
	padding: var(--azki-space-6) 0 var(--azki-space-6);
	background:
		radial-gradient(1200px 420px at 100% -10%, color-mix(in srgb, var(--azki-primary) 18%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--azki-primary) 6%, var(--azki-white)) 0%, var(--azki-bg-alt) 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--azki-primary) 10%, var(--azki-border));
}

.azki-articles-hero--has-cover {
	padding-top: 0;
	background: var(--azki-bg-alt);
}

.azki-articles-hero__cover {
	margin: 0;
	max-height: min(420px, 52vw);
	overflow: hidden;
	border-bottom: 1px solid color-mix(in srgb, var(--azki-primary) 12%, var(--azki-border));
}

.azki-articles-hero__cover-img {
	display: block;
	width: 100%;
	height: min(420px, 52vw);
	object-fit: cover;
}

.azki-articles-hero__glow {
	position: absolute;
	inset-inline-end: -8%;
	top: -30%;
	width: min(420px, 55vw);
	height: min(420px, 55vw);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-accent) 22%, transparent), transparent 70%);
	pointer-events: none;
}

.azki-articles-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 44rem;
	margin-top: var(--azki-space-2);
}

.azki-articles-hero--has-cover .azki-articles-hero__inner {
	margin-top: var(--azki-space-2);
}

.azki-articles-hero .azki-breadcrumbs {
	position: relative;
	z-index: 1;
	margin-top: var(--azki-space-3);
	margin-bottom: 0;
}

.azki-articles-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--azki-space-2);
	margin-bottom: var(--azki-space-2);
	padding: 0.35rem 0.85rem;
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-primary-dark);
	background: color-mix(in srgb, var(--azki-primary) 10%, var(--azki-white));
	border: 1px solid color-mix(in srgb, var(--azki-primary) 18%, transparent);
	border-radius: 999px;
}

.azki-articles-hero__title {
	margin: 0 0 var(--azki-space-2);
	font-size: clamp(1.85rem, 3vw, 2.75rem);
	font-weight: var(--azki-font-weight-bold);
	line-height: var(--azki-line-height-tight);
	color: var(--azki-gray-900);
}

.azki-articles-hero__desc {
	margin: 0;
	font-size: var(--azki-font-size-lg);
	line-height: var(--azki-line-height-relaxed);
	color: var(--azki-text-muted);
}

.azki-articles-hero__meta {
	margin: var(--azki-space-3) 0 0;
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-primary-dark);
}

.azki-articles-intro {
	padding: var(--azki-space-5) 0 0;
}

.azki-articles-list {
	padding: var(--azki-space-5) 0 var(--azki-space-10);
}

.azki-articles-list__header {
	margin-bottom: var(--azki-space-4);
}

.azki-article-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--azki-space-2);
	padding: var(--azki-space-2);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-lg);
}

.azki-article-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--azki-space-2);
	padding: var(--azki-space-2) var(--azki-space-4);
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-text-muted);
	text-decoration: none;
	border-radius: 999px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.azki-article-filter:hover {
	color: var(--azki-primary);
	background: var(--azki-primary-50);
}

.azki-article-filter.is-active {
	color: var(--azki-white);
	background: var(--azki-primary);
}

.azki-article-filter__count {
	display: inline-flex;
	min-width: 1.4rem;
	justify-content: center;
	padding: 0 0.35rem;
	font-size: 0.75rem;
	line-height: 1.4rem;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 14%, transparent);
}

.azki-articles-grid {
	margin-bottom: var(--azki-space-6);
}

.azki-articles-page .azki-empty .azki-btn {
	margin-top: var(--azki-space-4);
}

/* Article / blog layout with sidebar */
.azki-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: var(--azki-space-6);
	align-items: start;
}

.azki-article-layout__sidebar {
	position: sticky;
	top: calc(var(--azki-header-height, 72px) + 1.25rem);
}

.azki-single-article {
	padding: var(--azki-space-6) 0 var(--azki-space-10);
	background:
		radial-gradient(900px 320px at 0% 0%, color-mix(in srgb, var(--azki-primary) 8%, transparent), transparent 55%),
		var(--azki-bg-alt);
}

.azki-single-article .azki-breadcrumbs {
	margin: var(--azki-space-3) 0 var(--azki-space-3);
}

.azki-single-post .entry-featured-image {
	margin: 0;
	border-radius: calc(var(--azki-radius-lg) + 4px);
	overflow: hidden;
	box-shadow: 0 18px 40px color-mix(in srgb, var(--azki-primary-dark) 12%, transparent);
}

.azki-single-post__thumb {
	display: block;
	width: 100%;
	height: auto;
}

.azki-single-post .entry-header {
	margin-bottom: var(--azki-space-5);
}

.azki-single-post .entry-content {
	padding: var(--azki-space-6);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-lg);
}

/* Article comments */
.azki-comments {
	margin-top: var(--azki-space-6);
	padding: var(--azki-space-6);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-lg);
}

.azki-comments__header {
	margin-bottom: var(--azki-space-5);
}

.azki-comments__title {
	margin: 0 0 var(--azki-space-2);
	font-size: var(--azki-font-size-xl);
	font-weight: var(--azki-font-weight-bold);
	color: var(--azki-gray-900);
}

.azki-comments__desc,
.azki-comments__closed,
.azki-comments__login-hint {
	margin: 0;
	color: var(--azki-gray-600);
	font-size: var(--azki-font-size-sm);
	line-height: 1.7;
}

.azki-comments__login-hint a {
	color: var(--azki-primary);
	font-weight: 600;
}

.azki-comments__list,
.azki-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.azki-comments__list .children {
	margin-top: var(--azki-space-4);
	margin-inline-start: var(--azki-space-5);
	padding-inline-start: var(--azki-space-4);
	border-inline-start: 2px solid color-mix(in srgb, var(--azki-primary) 18%, var(--azki-border));
}

.azki-comment {
	margin: 0 0 var(--azki-space-4);
}

.azki-comment:last-child {
	margin-bottom: 0;
}

.azki-comment__body {
	padding: var(--azki-space-4);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius);
	background: var(--azki-gray-50);
}

.azki-comment__meta {
	display: flex;
	align-items: center;
	gap: var(--azki-space-3);
	margin-bottom: var(--azki-space-3);
}

.azki-comment__avatar-img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: var(--azki-radius-full);
	object-fit: cover;
}

.azki-comment__meta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.azki-comment__author {
	font-weight: 700;
	color: var(--azki-gray-900);
}

.azki-comment__date {
	font-size: 0.75rem;
	color: var(--azki-gray-500);
	text-decoration: none;
}

.azki-comment__date:hover {
	color: var(--azki-primary);
}

.azki-comment__awaiting {
	margin: 0 0 var(--azki-space-3);
	padding: 8px 12px;
	border-radius: var(--azki-radius-sm);
	background: #fff7ed;
	color: #9a3412;
	font-size: var(--azki-font-size-sm);
}

.azki-comment__content {
	color: var(--azki-gray-700);
	font-size: var(--azki-font-size-sm);
	line-height: 1.8;
}

.azki-comment__content p:last-child {
	margin-bottom: 0;
}

.azki-comment__reply {
	margin-top: var(--azki-space-3);
}

.azki-comment__reply .comment-reply-link {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-sm);
	background: var(--azki-white);
	color: var(--azki-gray-700);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
}

.azki-comment__reply .comment-reply-link:hover {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
}

.azki-comments__form-wrap {
	margin-top: var(--azki-space-6);
	padding-top: var(--azki-space-5);
	border-top: 1px solid var(--azki-border);
}

.azki-comments__form-title {
	margin: 0 0 var(--azki-space-4);
	font-size: var(--azki-font-size-lg);
	font-weight: 700;
}

.azki-comments__cancel a {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--azki-primary);
}

.azki-comments .comment-form p {
	margin: 0 0 var(--azki-space-4);
}

.azki-comments .comment-form label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--azki-font-size-sm);
	font-weight: 600;
	color: var(--azki-gray-800);
}

.azki-comments .comment-form .required {
	color: #d63638;
}

.azki-comments .comment-form input[type="text"],
.azki-comments .comment-form input[type="email"],
.azki-comments .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius);
	background: var(--azki-white);
	color: var(--azki-gray-900);
	font: inherit;
	line-height: 1.5;
	transition: border-color var(--azki-transition), box-shadow var(--azki-transition);
}

.azki-comments .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.azki-comments .comment-form input:focus,
.azki-comments .comment-form textarea:focus {
	outline: none;
	border-color: var(--azki-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--azki-primary) 18%, transparent);
}

.azki-comments__submit {
	margin-bottom: 0 !important;
}

.azki-comments__pagination {
	display: flex;
	justify-content: center;
	gap: var(--azki-space-2);
	margin: var(--azki-space-5) 0 0;
}

.azki-comments__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-sm);
	background: var(--azki-white);
	color: var(--azki-gray-700);
	text-decoration: none;
	font-size: 0.85rem;
}

.azki-comments__pagination .page-numbers.current,
.azki-comments__pagination .page-numbers:hover {
	border-color: var(--azki-primary);
	color: var(--azki-primary);
}

@media (max-width: 640px) {
	.azki-comments {
		padding: var(--azki-space-4);
	}

	.azki-comments__list .children {
		margin-inline-start: var(--azki-space-3);
		padding-inline-start: var(--azki-space-3);
	}

	.azki-comment__body {
		padding: var(--azki-space-3);
	}
}

/* Blog feed widget (AJAX tabs) */
.azki-blog-sidebar {
	display: grid;
	gap: var(--azki-space-6);
}

.azki-blog-feed {
	position: relative;
	overflow: hidden;
	padding: var(--azki-space-5);
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--azki-primary) 10%, var(--azki-white)) 0%, var(--azki-white) 42%, var(--azki-primary-50) 100%);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 16%, var(--azki-border));
	border-radius: calc(var(--azki-radius-lg) + 6px);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--azki-white) 80%, transparent) inset,
		0 18px 40px color-mix(in srgb, var(--azki-primary-dark) 8%, transparent);
}

.azki-blog-feed__glow {
	position: absolute;
	inset-inline-start: -20%;
	top: -30%;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-accent) 28%, transparent), transparent 70%);
	pointer-events: none;
	animation: azki-blog-feed-glow 8s ease-in-out infinite alternate;
}

.azki-blog-feed__header {
	position: relative;
	z-index: 1;
	margin-bottom: var(--azki-space-5);
}

.azki-blog-feed__eyebrow {
	display: inline-block;
	margin-bottom: var(--azki-space-2);
	font-size: var(--azki-font-size-xs);
	font-weight: var(--azki-font-weight-semibold);
	letter-spacing: 0.02em;
	color: var(--azki-primary-dark);
}

.azki-blog-feed__title {
	margin: 0 0 var(--azki-space-4);
	font-size: var(--azki-font-size-xl);
	font-weight: var(--azki-font-weight-bold);
	color: var(--azki-gray-900);
}

.azki-blog-feed__tabs {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem;
	padding: 0.25rem;
	background: color-mix(in srgb, var(--azki-primary) 8%, var(--azki-white));
	border: 1px solid color-mix(in srgb, var(--azki-primary) 14%, transparent);
	border-radius: 999px;
}

.azki-blog-feed__tabs-indicator {
	position: absolute;
	inset-block: 0.25rem;
	inset-inline-start: 0.25rem;
	width: calc(50% - 0.25rem);
	border-radius: 999px;
	background: linear-gradient(135deg, var(--azki-primary) 0%, var(--azki-primary-dark) 100%);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--azki-primary-dark) 28%, transparent);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	z-index: 0;
}

.azki-blog-feed__tabs[data-active="latest"] .azki-blog-feed__tabs-indicator {
	transform: translateX(-100%);
}

html[dir="ltr"] .azki-blog-feed__tabs[data-active="latest"] .azki-blog-feed__tabs-indicator,
body:not(.rtl) .azki-blog-feed__tabs[data-active="latest"] .azki-blog-feed__tabs-indicator {
	transform: translateX(100%);
}

.azki-blog-feed__tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.4rem;
	padding: 0.4rem 0.75rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--azki-text-muted);
	font-family: inherit;
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	cursor: pointer;
	transition: color 0.2s ease;
}

.azki-blog-feed__tab.is-active {
	color: var(--azki-white);
}

.azki-blog-feed__tab:focus-visible {
	outline: 2px solid var(--azki-primary-dark);
	outline-offset: 2px;
}

.azki-blog-feed__panels {
	position: relative;
	z-index: 1;
	min-height: 12rem;
}

.azki-blog-feed__panel {
	animation: azki-blog-feed-in 0.35s ease both;
}

.azki-blog-feed__panel.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.azki-blog-feed__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--azki-space-3);
}

.azki-blog-feed__item {
	margin: 0;
}

.azki-blog-feed__link {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: var(--azki-space-3);
	align-items: center;
	padding: var(--azki-space-2);
	text-decoration: none;
	color: inherit;
	border-radius: var(--azki-radius);
	background: color-mix(in srgb, var(--azki-white) 72%, transparent);
	border: 1px solid transparent;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.azki-blog-feed__link:hover {
	transform: translateY(-2px);
	background: var(--azki-white);
	border-color: color-mix(in srgb, var(--azki-primary) 18%, var(--azki-border));
	box-shadow: 0 12px 24px color-mix(in srgb, var(--azki-primary-dark) 10%, transparent);
}

.azki-blog-feed__media {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--azki-primary-50);
}

.azki-blog-feed__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.azki-blog-feed__thumb--placeholder {
	background:
		linear-gradient(135deg, var(--azki-primary-100), var(--azki-primary-50));
}

.azki-blog-feed__rank {
	position: absolute;
	inset-inline-start: 0.35rem;
	top: 0.35rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: var(--azki-font-weight-bold);
	color: var(--azki-white);
	background: color-mix(in srgb, var(--azki-primary-dark) 88%, #000);
	box-shadow: 0 4px 10px color-mix(in srgb, var(--azki-primary-dark) 35%, transparent);
}

.azki-blog-feed__body {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.azki-blog-feed__item-title {
	margin: 0;
	font-size: var(--azki-font-size-sm);
	font-weight: var(--azki-font-weight-semibold);
	line-height: 1.45;
	color: var(--azki-gray-900);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.azki-blog-feed__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.75rem;
	color: var(--azki-text-muted);
}

.azki-blog-feed__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.azki-blog-feed__empty {
	margin: 0;
	padding: var(--azki-space-6) var(--azki-space-3);
	text-align: center;
	color: var(--azki-text-muted);
	font-size: var(--azki-font-size-sm);
}

.azki-blog-feed__skeleton {
	display: grid;
	gap: var(--azki-space-3);
}

.azki-blog-feed__skeleton span {
	display: block;
	height: 64px;
	border-radius: var(--azki-radius);
	background: linear-gradient(90deg, var(--azki-primary-50), var(--azki-white), var(--azki-primary-50));
	background-size: 200% 100%;
	animation: azki-blog-feed-shimmer 1.2s linear infinite;
}

.azki-blog-sidebar__widgets .widget {
	padding: var(--azki-space-5);
	background: var(--azki-white);
	border: 1px solid var(--azki-border);
	border-radius: var(--azki-radius-lg);
}

.azki-blog-sidebar__widgets .widget-title {
	margin: 0 0 var(--azki-space-4);
	font-size: var(--azki-font-size-lg);
}

@keyframes azki-blog-feed-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes azki-blog-feed-glow {
	from { transform: translate(0, 0) scale(1); opacity: 0.7; }
	to { transform: translate(18px, 12px) scale(1.12); opacity: 1; }
}

@keyframes azki-blog-feed-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@media (max-width: 1024px) {
	.azki-article-layout {
		grid-template-columns: 1fr;
	}

	.azki-article-layout__sidebar {
		position: static;
		order: 2;
	}
}

@media (max-width: 768px) {
	.azki-articles-hero {
		padding: var(--azki-space-5) 0 var(--azki-space-5);
	}

	.azki-articles-hero--has-cover {
		padding-top: 0;
	}

	.azki-article-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.azki-article-filters::-webkit-scrollbar {
		display: none;
	}

	.azki-article-filter {
		white-space: nowrap;
		flex-shrink: 0;
	}

	.azki-single-article {
		padding: var(--azki-space-5) 0 var(--azki-space-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.azki-blog-feed__glow,
	.azki-blog-feed__tabs-indicator,
	.azki-blog-feed__panel,
	.azki-blog-feed__link,
	.azki-blog-feed__skeleton span {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   Table of Contents
   ========================================================================== */

.azki-toc {
	--azki-toc-accent: var(--azki-primary);
	position: relative;
	overflow: hidden;
	margin: 0 0 var(--azki-space-5);
	padding: var(--azki-space-4);
	background:
		linear-gradient(155deg, color-mix(in srgb, var(--azki-primary) 9%, var(--azki-white)) 0%, var(--azki-white) 48%, var(--azki-primary-50) 100%);
	border: 1px solid color-mix(in srgb, var(--azki-primary) 16%, var(--azki-border));
	border-radius: calc(var(--azki-radius-lg) + 4px);
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--azki-white) 75%, transparent) inset,
		0 14px 28px color-mix(in srgb, var(--azki-primary-dark) 7%, transparent);
}

.azki-toc__glow {
	position: absolute;
	inset-inline-end: -12%;
	top: -35%;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--azki-accent) 24%, transparent), transparent 70%);
	pointer-events: none;
}

.azki-toc__header {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--azki-space-3);
}

.azki-toc__heading {
	display: flex;
	align-items: center;
	gap: var(--azki-space-2);
	min-width: 0;
}

.azki-toc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 10px;
	color: var(--azki-primary-dark);
	background: color-mix(in srgb, var(--azki-primary) 12%, var(--azki-white));
	border: 1px solid color-mix(in srgb, var(--azki-primary) 16%, transparent);
	flex-shrink: 0;
}

.azki-toc__title {
	font-size: var(--azki-font-size-base);
	font-weight: var(--azki-font-weight-bold);
	color: var(--azki-gray-900);
}

.azki-toc__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: var(--azki-font-weight-semibold);
	color: var(--azki-primary-dark);
	background: color-mix(in srgb, var(--azki-primary) 12%, var(--azki-white));
}

.azki-toc__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--azki-primary) 8%, var(--azki-white));
	color: var(--azki-primary-dark);
	cursor: pointer;
	transition: transform 0.25s ease, background 0.2s ease;
}

.azki-toc__toggle:hover {
	background: color-mix(in srgb, var(--azki-primary) 14%, var(--azki-white));
}

.azki-toc.is-collapsed .azki-toc__toggle {
	transform: rotate(180deg);
}

.azki-toc__body {
	position: relative;
	z-index: 1;
	margin-top: var(--azki-space-4);
}

.azki-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.2rem;
}

.azki-toc__list--nested {
	position: relative;
	margin-top: 0.25rem;
	margin-inline-start: 0.85rem;
	padding-inline-start: 0.85rem;
	gap: 0.15rem;
}

.azki-toc__list--nested::before {
	content: "";
	position: absolute;
	inset-block: 0.35rem 0.35rem;
	inset-inline-start: 0;
	width: 2px;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--azki-primary) 35%, transparent),
		color-mix(in srgb, var(--azki-primary) 8%, transparent)
	);
}

.azki-toc__link {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr);
	align-items: start;
	gap: 0.65rem;
	padding: 0.55rem 0.7rem;
	text-decoration: none;
	color: var(--azki-text);
	border-radius: 12px;
	border: 1px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.azki-toc__item--h2 > .azki-toc__link {
	font-weight: var(--azki-font-weight-semibold);
}

.azki-toc__item--h3 > .azki-toc__link,
.azki-toc__item--h4 > .azki-toc__link {
	padding-block: 0.4rem;
}

.azki-toc__item--h3 > .azki-toc__link .azki-toc__text,
.azki-toc__item--h4 > .azki-toc__link .azki-toc__text {
	font-size: 0.8125rem;
	font-weight: var(--azki-font-weight-medium);
	color: var(--azki-gray-700);
}

.azki-toc__item--h4 > .azki-toc__link .azki-toc__text {
	font-size: 0.78rem;
	color: var(--azki-text-muted);
}

.azki-toc__item--depth-1 > .azki-toc__link {
	padding-inline-start: 0.55rem;
}

.azki-toc__item--depth-2 > .azki-toc__link {
	padding-inline-start: 0.45rem;
}

.azki-toc__list--nested[data-depth="2"] {
	margin-inline-start: 0.7rem;
	padding-inline-start: 0.7rem;
}

.azki-toc__bullet {
	width: 8px;
	height: 8px;
	margin-top: 0.4rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--azki-primary) 35%, var(--azki-border));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--azki-primary) 10%, transparent);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.azki-toc__item--h3 > .azki-toc__link .azki-toc__bullet {
	width: 6px;
	height: 6px;
	margin-top: 0.45rem;
}

.azki-toc__item--h4 > .azki-toc__link .azki-toc__bullet {
	width: 5px;
	height: 5px;
	margin-top: 0.48rem;
	border-radius: 2px;
	box-shadow: none;
	background: color-mix(in srgb, var(--azki-primary) 28%, var(--azki-border));
}

.azki-toc__text {
	font-size: var(--azki-font-size-sm);
	line-height: 1.55;
	font-weight: var(--azki-font-weight-medium);
}

.azki-toc__link:hover {
	background: color-mix(in srgb, var(--azki-primary) 7%, var(--azki-white));
	border-color: color-mix(in srgb, var(--azki-primary) 14%, transparent);
	transform: translateX(-2px);
}

.azki-toc__link.is-active {
	color: var(--azki-primary-dark);
	background: color-mix(in srgb, var(--azki-primary) 12%, var(--azki-white));
	border-color: color-mix(in srgb, var(--azki-primary) 20%, transparent);
}

.azki-toc__link.is-active .azki-toc__bullet {
	background: var(--azki-primary);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--azki-primary) 18%, transparent);
}

.azki-toc--sidebar {
	margin-bottom: 0;
}

.azki-single-post .entry-content > .azki-toc {
	margin-bottom: var(--azki-space-6);
}

.azki-single-post .entry-content h2[id],
.azki-single-post .entry-content h3[id],
.azki-single-post .entry-content h4[id] {
	scroll-margin-top: calc(var(--azki-header-height, 72px) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	.azki-toc__toggle,
	.azki-toc__link {
		transition: none !important;
	}
}