@charset "UTF-8";
/**
 * AllinOne Freelancing — main stylesheet.
 *
 * Light, premium, 3D-leaning interface: white surfaces, violet accents,
 * colourful course identities, black typography and restrained gold detail.
 *
 * 1.  Tokens
 * 2.  Base
 * 3.  Layout and typography
 * 4.  Buttons, chips, alerts
 * 5.  Header and navigation
 * 6.  Hero and video player
 * 7.  Homepage sections
 * 8.  Course cards and artwork
 * 9.  Reviews and YouTube facades
 * 10. Blog, FAQ, CTA, footer
 * 11. Inner pages, course single, forms
 * 12. Catalogue, enrollment, confirmation
 * 13. About, instructor, contact, payment guide, legal, stories
 * 14. Blog archive, article, comments, search, 404
 * 15. Responsive
 * 16. Motion and print
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 * ---------------------------------------------------------------------- */
:root {
	--aiof-violet: #6d28d9;
	--aiof-violet-strong: #5b21b6;
	--aiof-violet-soft: #f4efff;
	--aiof-fuchsia: #c026d3;
	--aiof-indigo: #4338ca;
	--aiof-blue: #2563eb;
	--aiof-teal: #0f766e;
	--aiof-emerald: #059669;
	--aiof-rose: #be123c;
	--aiof-amber: #b45309;
	--aiof-gold: #d8a23a;
	--aiof-gold-soft: #fdf6e7;

	--aiof-ink: #16121f;
	--aiof-heading: #171226;
	--aiof-body: #423c55;
	--aiof-muted: #6d6684;
	--aiof-line: #ebe5f6;
	--aiof-line-strong: #ded4f0;

	--aiof-white: #ffffff;
	--aiof-surface: #ffffff;
	--aiof-surface-2: #faf8ff;
	--aiof-surface-3: #f4f1fb;
	--aiof-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #d946ef 100%);
	--aiof-gradient-soft: linear-gradient(135deg, #f6f1ff 0%, #fdf2ff 55%, #f1f6ff 100%);
	--aiof-gradient-warm: linear-gradient(135deg, #fff7ed 0%, #fff1f2 100%);

	--aiof-radius-xs: 10px;
	--aiof-radius-sm: 14px;
	--aiof-radius: 20px;
	--aiof-radius-lg: 26px;
	--aiof-radius-xl: 34px;
	--aiof-radius-pill: 999px;

	--aiof-shadow-xs: 0 1px 2px rgba(23, 18, 38, 0.05);
	--aiof-shadow-sm: 0 6px 18px -10px rgba(49, 26, 92, 0.28);
	--aiof-shadow: 0 18px 44px -26px rgba(49, 26, 92, 0.36);
	--aiof-shadow-lg: 0 34px 74px -34px rgba(49, 26, 92, 0.42);
	--aiof-shadow-3d: 0 26px 50px -28px rgba(49, 26, 92, 0.5), 0 3px 0 0 rgba(255, 255, 255, 0.6) inset;

	--aiof-font: "Plus Jakarta Sans", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;
	--aiof-font-bn: "Hind Siliguri", "Plus Jakarta Sans", system-ui, sans-serif;

	--aiof-container: 1200px;
	--aiof-container-narrow: 780px;
	--aiof-container-article: 880px;
	--aiof-gutter: 22px;
	--aiof-header-height: 76px;

	--aiof-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--aiof-header-height) + 18px);
}

body {
	margin: 0;
	background-color: var(--aiof-white);
	color: var(--aiof-body);
	font-family: var(--aiof-font);
	font-size: 16.5px;
	line-height: 1.75;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.aiof-nav-open {
	overflow: hidden;
}

img,
svg,
video,
canvas {
	max-width: 100%;
	height: auto;
}

svg.aiof-icon {
	display: inline-block;
	vertical-align: -0.18em;
	flex: 0 0 auto;
	overflow: visible;
}

iframe {
	max-width: 100%;
	border: 0;
}

figure {
	margin: 0;
}

a {
	color: var(--aiof-violet);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color 0.18s var(--aiof-ease);
}

a:hover {
	color: var(--aiof-violet-strong);
	text-decoration: underline;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.55em;
	color: var(--aiof-heading);
	font-family: var(--aiof-font-bn);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);
	font-weight: 800;
}

h2 {
	font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem);
}

h3 {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.42rem);
}

h4 {
	font-size: 1.1rem;
}

p {
	margin: 0 0 1rem;
}

ul,
ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

hr {
	border: 0;
	border-top: 1px solid var(--aiof-line);
	margin: 2rem 0;
}

::selection {
	background: rgba(124, 58, 237, 0.16);
	color: var(--aiof-ink);
}

:focus-visible {
	outline: 3px solid rgba(109, 40, 217, 0.55);
	outline-offset: 2px;
	border-radius: 6px;
}

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

.skip-link,
.aiof-skip-link {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 999;
	background: var(--aiof-ink);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--aiof-radius-pill);
	font-weight: 600;
	transition: top 0.2s var(--aiof-ease);
}

.aiof-skip-link:focus,
.aiof-skip-link:focus-visible {
	top: 12px;
	color: #fff;
	text-decoration: none;
}

.aiof-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 3. Layout and typography
 * ---------------------------------------------------------------------- */
.aiof-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.aiof-main {
	flex: 1 0 auto;
}

.aiof-container {
	width: 100%;
	max-width: calc(var(--aiof-container) + (var(--aiof-gutter) * 2));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--aiof-gutter);
	padding-right: var(--aiof-gutter);
}

.aiof-container--narrow {
	max-width: calc(var(--aiof-container-narrow) + (var(--aiof-gutter) * 2));
}

.aiof-container--article {
	max-width: calc(var(--aiof-container-article) + (var(--aiof-gutter) * 2));
}

.aiof-section {
	position: relative;
	padding: clamp(56px, 4vw + 34px, 104px) 0;
}

.aiof-section > .aiof-container {
	position: relative;
	z-index: 1;
}

.aiof-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aiof-violet);
	font-family: var(--aiof-font);
}

.aiof-eyebrow--light {
	color: #f5e9ff;
}

.aiof-eyebrow__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--aiof-gradient);
	box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.14);
}

.aiof-eyebrow__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid var(--aiof-line-strong);
	color: var(--aiof-violet-strong);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-eyebrow__badge {
	padding: 3px 10px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-gradient);
	color: #fff;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
}

.aiof-section-head {
	max-width: 720px;
	margin-bottom: clamp(28px, 2vw + 18px, 46px);
}

.aiof-section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.aiof-section-head--center .aiof-eyebrow {
	justify-content: center;
}

.aiof-section-head h2 {
	margin-bottom: 0.4em;
}

.aiof-section-head__text {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 1.03rem;
}

.aiof-text-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	color: var(--aiof-violet-strong);
	font-size: 0.95rem;
}

.aiof-text-link:hover {
	color: var(--aiof-fuchsia);
}

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

.aiof-actions .aiof-button + .aiof-button {
	margin-top: 0;
}

.aiof-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
}

.aiof-chip-row--course {
	margin-top: 18px;
}

.aiof-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border-radius: var(--aiof-radius-pill);
	background: #fff;
	border: 1px solid var(--aiof-line-strong);
	color: var(--aiof-heading);
	font-size: 0.83rem;
	font-weight: 600;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-chip--link:hover {
	border-color: rgba(124, 58, 237, 0.5);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	text-decoration: none;
	transform: translateY(-1px);
}

.aiof-chip span {
	color: var(--aiof-muted);
	font-weight: 500;
}

.aiof-check-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.aiof-check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--aiof-body);
}

.aiof-check-list li .aiof-icon {
	color: var(--aiof-emerald);
	margin-top: 3px;
}

.aiof-check-list--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aiof-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--aiof-muted);
	font-size: 0.9rem;
}

.aiof-breadcrumb {
	margin-bottom: 22px;
	font-size: 0.86rem;
}

.aiof-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiof-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--aiof-muted);
}

.aiof-breadcrumb li + li::before {
	content: "/";
	color: var(--aiof-line-strong);
}

.aiof-breadcrumb a {
	color: var(--aiof-muted);
	font-weight: 500;
}

.aiof-breadcrumb a:hover {
	color: var(--aiof-violet-strong);
}

.aiof-breadcrumb [aria-current="page"] {
	color: var(--aiof-heading);
	font-weight: 600;
}

.aiof-avatar {
	border-radius: 50%;
	background: var(--aiof-surface-3);
}

.aiof-avatar--lg {
	width: 72px;
	height: 72px;
}

/* Reveal on scroll (only when JavaScript is available). */
.aiof-js .reveal {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 0.6s var(--aiof-ease), transform 0.6s var(--aiof-ease);
	transition-delay: var(--delay, 0ms);
	will-change: opacity, transform;
}

.aiof-js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
 * 4. Buttons, chips, alerts, forms
 * ---------------------------------------------------------------------- */
.aiof-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 22px;
	border-radius: var(--aiof-radius-pill);
	border: 1px solid transparent;
	font-family: var(--aiof-font-bn);
	font-size: 0.96rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: transform 0.18s var(--aiof-ease), box-shadow 0.18s var(--aiof-ease), background 0.18s var(--aiof-ease), border-color 0.18s var(--aiof-ease), color 0.18s var(--aiof-ease);
	box-shadow: var(--aiof-shadow-sm);
	position: relative;
	overflow: hidden;
}

.aiof-button:hover {
	text-decoration: none;
	transform: translateY(-2px);
}

.aiof-button:active {
	transform: translateY(0);
}

.aiof-button--primary {
	background: var(--aiof-gradient);
	color: #fff;
	box-shadow: 0 16px 32px -16px rgba(109, 40, 217, 0.72);
}

.aiof-button--primary:hover {
	color: #fff;
	box-shadow: 0 22px 42px -18px rgba(109, 40, 217, 0.85);
}

.aiof-button--whatsapp {
	background: linear-gradient(135deg, #12b76a 0%, #059669 100%);
	color: #fff;
	box-shadow: 0 16px 32px -18px rgba(5, 150, 105, 0.7);
}

.aiof-button--whatsapp:hover {
	color: #fff;
}

.aiof-button--telegram {
	background: linear-gradient(135deg, #2196d9 0%, #1d6fb8 100%);
	color: #fff;
	box-shadow: 0 16px 32px -18px rgba(29, 111, 184, 0.7);
}

.aiof-button--telegram:hover {
	color: #fff;
}

.aiof-button--ghost {
	background: #fff;
	border-color: var(--aiof-line-strong);
	color: var(--aiof-heading);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-button--ghost:hover {
	border-color: rgba(124, 58, 237, 0.55);
	color: var(--aiof-violet-strong);
	background: var(--aiof-violet-soft);
}

.aiof-button--light {
	background: #fff;
	color: var(--aiof-violet-strong);
	box-shadow: 0 20px 38px -20px rgba(15, 5, 45, 0.7);
}

.aiof-button--light:hover {
	color: var(--aiof-violet-strong);
}

.aiof-button--glass {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
	backdrop-filter: blur(8px);
}

.aiof-button--glass:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.24);
}

.aiof-button--large {
	padding: 15px 28px;
	font-size: 1.02rem;
}

.aiof-button--block {
	width: 100%;
}

.aiof-button--block + .aiof-button--block {
	margin-top: 10px;
}

.aiof-button[disabled],
.aiof-button.is-busy {
	opacity: 0.65;
	cursor: progress;
	transform: none;
}

.aiof-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
	color: var(--aiof-heading);
	box-shadow: var(--aiof-shadow-xs);
	transition: transform 0.18s var(--aiof-ease), box-shadow 0.18s var(--aiof-ease);
}

.aiof-icon-button:hover {
	transform: translateY(-2px);
	text-decoration: none;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-icon-button--whatsapp {
	color: #0f8a53;
	border-color: rgba(15, 138, 83, 0.28);
	background: #eefaf3;
}

.aiof-icon-button--telegram {
	color: #1d6fb8;
	border-color: rgba(29, 111, 184, 0.28);
	background: #edf5fd;
}

.aiof-icon-button--lg {
	width: 50px;
	height: 50px;
}

.aiof-copy-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: var(--aiof-radius-pill);
	border: 1px dashed var(--aiof-line-strong);
	background: #fff;
	color: var(--aiof-violet-strong);
	font-size: 0.83rem;
	font-weight: 600;
}

.aiof-copy-button:hover {
	border-style: solid;
	border-color: rgba(124, 58, 237, 0.5);
	background: var(--aiof-violet-soft);
}

.aiof-copy-button.is-copied {
	color: var(--aiof-emerald);
	border-color: rgba(5, 150, 105, 0.5);
	background: #ecfdf5;
}

.aiof-alert {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--aiof-radius);
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
	box-shadow: var(--aiof-shadow-xs);
	margin-bottom: 20px;
}

.aiof-alert > .aiof-icon {
	margin-top: 3px;
}

.aiof-alert strong {
	display: block;
	color: var(--aiof-heading);
	margin-bottom: 4px;
}

.aiof-alert p {
	margin: 0;
	font-size: 0.94rem;
}

.aiof-alert ul {
	margin: 6px 0 0;
	font-size: 0.94rem;
}

.aiof-alert--error {
	background: #fff5f5;
	border-color: rgba(190, 18, 60, 0.24);
	color: #7f1d2d;
}

.aiof-alert--error > .aiof-icon {
	color: var(--aiof-rose);
}

.aiof-alert--success {
	background: #f0fdf6;
	border-color: rgba(5, 150, 105, 0.26);
	color: #14532d;
}

.aiof-alert--success > .aiof-icon {
	color: var(--aiof-emerald);
}

.aiof-alert--warning {
	background: #fffaf0;
	border-color: rgba(180, 83, 9, 0.26);
	color: #7c2d12;
}

.aiof-alert--warning > .aiof-icon {
	color: var(--aiof-amber);
}

.aiof-required {
	color: var(--aiof-rose);
	font-weight: 700;
}

.aiof-form-field,
.aiof-field {
	display: block;
	margin: 0 0 18px;
}

.aiof-form-field label,
.aiof-field label,
.aiof-form-field > span:first-child {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	color: var(--aiof-heading);
	font-size: 0.94rem;
}

.aiof-form-field input[type="text"],
.aiof-form-field input[type="email"],
.aiof-form-field input[type="tel"],
.aiof-form-field input[type="url"],
.aiof-form-field input[type="search"],
.aiof-form-field input[type="password"],
.aiof-form-field select,
.aiof-form-field textarea,
.aiof-field input,
.aiof-field textarea {
	width: 100%;
	padding: 12px 15px;
	border-radius: var(--aiof-radius-sm);
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
	color: var(--aiof-heading);
	transition: border-color 0.18s var(--aiof-ease), box-shadow 0.18s var(--aiof-ease);
}

.aiof-form-field input:focus,
.aiof-form-field select:focus,
.aiof-form-field textarea:focus,
.aiof-field input:focus,
.aiof-field textarea:focus {
	outline: none;
	border-color: rgba(124, 58, 237, 0.6);
	box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.aiof-form-field textarea {
	resize: vertical;
	min-height: 96px;
}

.aiof-form-field__help {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	color: var(--aiof-muted);
	font-size: 0.85rem;
}

.aiof-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-bottom: 16px;
	padding: 14px 16px;
	border-radius: var(--aiof-radius-sm);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	cursor: pointer;
	font-size: 0.94rem;
}

.aiof-checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--aiof-violet);
	flex: 0 0 auto;
}

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

.aiof-form-field--full {
	grid-column: 1 / -1;
}

.aiof-amount-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
	margin-bottom: 22px;
}

.aiof-amount-box span {
	display: block;
	color: var(--aiof-muted);
	font-size: 0.86rem;
	font-weight: 600;
}

.aiof-amount-box strong {
	font-size: 1.7rem;
	color: var(--aiof-violet-strong);
	font-family: var(--aiof-font);
	letter-spacing: -0.02em;
}

.aiof-amount-box__note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem !important;
	color: var(--aiof-muted) !important;
	max-width: 260px;
}

.aiof-method-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 22px;
}

.aiof-method-fieldset legend {
	font-weight: 600;
	color: var(--aiof-heading);
	margin-bottom: 10px;
	font-size: 0.94rem;
}

.aiof-method-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.aiof-method-option {
	position: relative;
	display: block;
	cursor: pointer;
}

.aiof-method-option input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.aiof-method-option__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
	padding: 15px 16px;
	border-radius: var(--aiof-radius-sm);
	border: 2px solid var(--aiof-line-strong);
	background: #fff;
	transition: border-color 0.18s var(--aiof-ease), box-shadow 0.18s var(--aiof-ease), background 0.18s var(--aiof-ease);
}

.aiof-method-option__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--method-color, var(--aiof-violet));
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--method-color, #6d28d9) 16%, transparent);
	margin-bottom: 6px;
}

.aiof-method-option strong {
	color: var(--aiof-heading);
}

.aiof-method-option small {
	color: var(--aiof-muted);
	font-size: 0.8rem;
}

.aiof-method-option input:checked + .aiof-method-option__body {
	border-color: var(--method-color, var(--aiof-violet));
	background: var(--method-soft, var(--aiof-violet-soft));
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-method-option input:focus-visible + .aiof-method-option__body {
	outline: 3px solid rgba(109, 40, 217, 0.45);
	outline-offset: 2px;
}

.aiof-upload__box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border-radius: var(--aiof-radius);
	border: 2px dashed var(--aiof-line-strong);
	background: var(--aiof-surface-2);
}

.aiof-upload__box:hover {
	border-color: rgba(124, 58, 237, 0.5);
	background: var(--aiof-violet-soft);
}

.aiof-upload__box input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
}

.aiof-upload__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #fff;
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-upload__box strong {
	display: block;
	color: var(--aiof-heading);
}

.aiof-upload__box span {
	color: var(--aiof-muted);
	font-size: 0.85rem;
}

.aiof-upload__preview {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--aiof-radius-sm);
	border: 1px solid var(--aiof-line);
	background: #fff;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-upload__preview img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid var(--aiof-line);
}

.aiof-upload__preview strong {
	display: block;
	font-size: 0.9rem;
	word-break: break-all;
}

.aiof-upload__preview span {
	color: var(--aiof-muted);
	font-size: 0.82rem;
}

.aiof-upload.is-dragover .aiof-upload__box {
	border-color: var(--aiof-violet);
	background: var(--aiof-violet-soft);
}

.aiof-form-note,
.aiof-form-submit-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--aiof-muted);
	font-size: 0.87rem;
}

.aiof-payment-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.aiof-payment-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--aiof-radius-pill);
	background: #fff;
	border: 1px solid var(--aiof-line-strong);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--aiof-heading);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-payment-badge a {
	color: inherit;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.aiof-payment-badge__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--method, var(--aiof-violet));
}

.aiof-payment-badges__number {
	margin: 12px 0 0;
	font-size: 0.9rem;
	color: var(--aiof-muted);
}

.aiof-payment-badges__number strong {
	color: var(--aiof-heading);
	font-family: var(--aiof-font);
}

.aiof-empty {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: clamp(24px, 3vw, 40px);
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-empty__art {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	flex: 0 0 auto;
	border-radius: 26px;
	background: #fff;
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow);
}

.aiof-empty__ring {
	position: absolute;
	inset: -12px;
	border-radius: 34px;
	border: 2px dashed rgba(124, 58, 237, 0.28);
}

.aiof-empty__copy h2,
.aiof-empty__copy h3 {
	margin-bottom: 0.35em;
}

.aiof-empty__copy p {
	margin-bottom: 0;
	color: var(--aiof-muted);
}

.aiof-empty__copy .aiof-actions {
	margin-top: 18px;
}

.aiof-notice,
.aiof-admin-notice {
	padding: 14px 16px;
	border-radius: var(--aiof-radius-sm);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	color: var(--aiof-body);
	font-size: 0.92rem;
}

.aiof-notice--warning {
	background: #fffaf0;
	border-color: rgba(180, 83, 9, 0.24);
}

/* -------------------------------------------------------------------------
 * 5. Header and navigation
 * ---------------------------------------------------------------------- */
.aiof-announcement {
	background: var(--aiof-ink);
	color: #f4efff;
	font-size: 0.88rem;
}

.aiof-announcement__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.aiof-announcement p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.aiof-announcement__icon {
	color: var(--aiof-gold);
	display: inline-flex;
}

.aiof-announcement__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #e9d5ff;
	font-weight: 600;
	white-space: nowrap;
}

.aiof-announcement__link:hover {
	color: #fff;
}

.aiof-announcement__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: transparent;
	color: #e9d5ff;
	flex: 0 0 auto;
}

.aiof-announcement__close:hover {
	background: rgba(255, 255, 255, 0.12);
}

.aiof-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.22s var(--aiof-ease), border-color 0.22s var(--aiof-ease), background 0.22s var(--aiof-ease);
}

.aiof-header.is-stuck {
	border-bottom-color: var(--aiof-line);
	box-shadow: 0 12px 32px -28px rgba(23, 18, 38, 0.6);
	background: rgba(255, 255, 255, 0.94);
}

.aiof-header__bar {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: var(--aiof-header-height);
}

.aiof-header__brand {
	flex: 0 0 auto;
}

.aiof-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.aiof-brand:hover {
	text-decoration: none;
}

.aiof-brand__img {
	display: block;
	max-height: 52px;
	width: auto;
}

.aiof-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--aiof-line-strong);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-brand__mark svg {
	width: 32px;
	height: 32px;
}

.aiof-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.aiof-brand__name {
	font-weight: 800;
	color: var(--aiof-heading);
	font-size: 1.16rem;
	letter-spacing: -0.02em;
}

.aiof-brand__sub {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--aiof-violet);
}

.aiof-brand--footer .aiof-brand__name {
	color: #fff;
}

.aiof-brand--footer .aiof-brand__sub {
	color: #d8b4fe;
}

.aiof-header__desktop-nav {
	margin-left: auto;
}

.aiof-nav,
ul.aiof-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiof-nav li {
	position: relative;
}

.aiof-nav a {
	display: inline-flex;
	align-items: center;
	padding: 9px 13px;
	border-radius: var(--aiof-radius-pill);
	color: var(--aiof-body);
	font-weight: 600;
	font-size: 0.93rem;
	font-family: var(--aiof-font-bn);
}

.aiof-nav a:hover {
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	text-decoration: none;
}

.aiof-nav .current-menu-item > a,
.aiof-nav a[aria-current="page"] {
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
}

.aiof-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	display: none;
	flex-direction: column;
	padding: 10px;
	margin: 0;
	list-style: none;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg);
	z-index: 5;
}

.aiof-nav li:hover > .sub-menu,
.aiof-nav li:focus-within > .sub-menu {
	display: flex;
}

.aiof-nav .sub-menu a {
	border-radius: var(--aiof-radius-xs);
	padding: 9px 12px;
}

.aiof-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.aiof-header__cta {
	padding: 11px 18px;
}

.aiof-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
	color: var(--aiof-heading);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-nav-toggle__close {
	display: none;
}

.aiof-nav-toggle[aria-expanded="true"] .aiof-nav-toggle__open {
	display: none;
}

.aiof-nav-toggle[aria-expanded="true"] .aiof-nav-toggle__close {
	display: inline-flex;
}

.aiof-mobile-menu {
	display: none;
	border-top: 1px solid var(--aiof-line);
	background: #fff;
	box-shadow: var(--aiof-shadow-lg);
	max-height: calc(100vh - var(--aiof-header-height));
	overflow-y: auto;
}

.aiof-mobile-menu[hidden] {
	display: none;
}

.aiof-mobile-menu .aiof-nav {
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 14px 0;
}

.aiof-mobile-menu .aiof-nav a {
	padding: 13px 14px;
	border-radius: var(--aiof-radius-sm);
	font-size: 1.02rem;
}

.aiof-mobile-menu__actions {
	display: grid;
	gap: 10px;
	padding-bottom: 14px;
}

.aiof-mobile-menu__note {
	margin: 0;
	padding: 14px 0 20px;
	border-top: 1px solid var(--aiof-line);
	color: var(--aiof-muted);
	font-size: 0.82rem;
}

/* -------------------------------------------------------------------------
 * 6. Hero
 * ---------------------------------------------------------------------- */
.aiof-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 5vw, 96px) 0 clamp(34px, 3vw, 56px);
	background: linear-gradient(180deg, #fdfcff 0%, #f7f3ff 52%, #ffffff 100%);
	isolation: isolate;
}

.aiof-hero__background {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.aiof-hero__wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 55% at 82% 8%, rgba(217, 70, 239, 0.16), transparent 68%),
		radial-gradient(52% 48% at 8% 88%, rgba(37, 99, 235, 0.13), transparent 69%),
		radial-gradient(40% 40% at 50% 110%, rgba(216, 162, 58, 0.12), transparent 70%);
}

.aiof-hero__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	opacity: 0.6;
}

.aiof-hero__orb--one {
	width: 320px;
	height: 320px;
	top: -110px;
	right: -60px;
	background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.55), rgba(168, 85, 247, 0));
}

.aiof-hero__orb--two {
	width: 260px;
	height: 260px;
	bottom: -110px;
	left: -70px;
	background: radial-gradient(circle at 60% 40%, rgba(34, 211, 238, 0.45), rgba(34, 211, 238, 0));
}

.aiof-hero__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(109, 40, 217, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(109, 40, 217, 0.07) 1px, transparent 1px);
	background-size: 58px 58px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 75%);
}

.aiof-hero__spark {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--aiof-gradient);
	box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.12);
}

.aiof-hero__spark--one {
	top: 22%;
	left: 12%;
}

.aiof-hero__spark--two {
	bottom: 24%;
	right: 16%;
	background: linear-gradient(135deg, #f59e0b, #fbbf24);
	box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.14);
}

.aiof-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 58px);
	align-items: center;
}

.aiof-hero__title {
	margin-bottom: 0.24em;
	background: linear-gradient(120deg, #241540 10%, #6d28d9 50%, #c026d3 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.aiof-hero__bangla {
	margin: 0 0 16px;
	font-family: var(--aiof-font-bn);
	font-size: clamp(1.1rem, 0.95rem + 0.9vw, 1.5rem);
	font-weight: 600;
	color: var(--aiof-violet-strong);
	line-height: 1.5;
}

.aiof-hero__text {
	max-width: 56ch;
	color: var(--aiof-body);
	font-size: 1.04rem;
	margin-bottom: 0;
}

.aiof-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.aiof-hero__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
	padding: 10px 15px;
	border-radius: var(--aiof-radius-pill);
	background: #fff;
	border: 1px dashed var(--aiof-line-strong);
	color: var(--aiof-muted);
	font-size: 0.87rem;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-hero__note .aiof-icon {
	color: var(--aiof-emerald);
}

.aiof-hero__points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 18px 0 0;
	padding: 0;
	font-size: 0.9rem;
	color: var(--aiof-body);
}

.aiof-hero__points li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.aiof-hero__points .aiof-icon {
	color: var(--aiof-violet);
}

.aiof-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 26px;
	margin-top: clamp(34px, 3vw, 56px);
	padding: 15px 22px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	font-size: 0.88rem;
	color: var(--aiof-muted);
	backdrop-filter: blur(8px);
}

.aiof-hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aiof-hero__trust .aiof-icon {
	color: var(--aiof-violet);
}

/* Hero video player */
.aiof-hero-player {
	position: relative;
	border-radius: var(--aiof-radius-xl);
	background: #fff;
	padding: 12px;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg);
}

.aiof-hero-player__frame {
	position: relative;
	border-radius: calc(var(--aiof-radius-xl) - 10px);
	overflow: hidden;
	background: #100a1f;
	aspect-ratio: 16 / 10;
}

.aiof-hero-player__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aiof-hero-player__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: linear-gradient(180deg, rgba(16, 10, 31, 0.12), rgba(16, 10, 31, 0.56));
	color: #fff;
	transition: opacity 0.25s var(--aiof-ease), visibility 0.25s var(--aiof-ease);
}

.aiof-hero-player__play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--aiof-violet-strong);
	box-shadow: 0 22px 40px -18px rgba(16, 10, 31, 0.8);
	transition: transform 0.22s var(--aiof-ease);
}

.aiof-hero-player__play:hover .aiof-hero-player__play-icon {
	transform: scale(1.08);
}

.aiof-hero-player.is-playing .aiof-hero-player__play {
	opacity: 0;
	visibility: hidden;
}

.aiof-hero-player__caption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--aiof-radius);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--aiof-shadow-sm);
	backdrop-filter: blur(8px);
}

.aiof-hero-player__caption strong {
	color: var(--aiof-heading);
	font-size: 0.98rem;
}

.aiof-hero-player__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-gradient);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aiof-hero-player__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 8px 4px;
	font-size: 0.82rem;
	color: var(--aiof-muted);
}

.aiof-hero-player__bar span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.aiof-hero-player__mini-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border-radius: var(--aiof-radius-pill);
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--aiof-violet-strong);
	white-space: nowrap;
}

.aiof-hero-player__restore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 8px 8px 0;
	padding: 9px 15px;
	border-radius: var(--aiof-radius-pill);
	border: 1px solid rgba(109, 40, 217, 0.3);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	font-size: 0.85rem;
	font-weight: 600;
}

.aiof-hero-player.is-mini {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: min(330px, calc(100vw - 36px));
	z-index: 120;
	padding: 8px;
	box-shadow: 0 30px 60px -24px rgba(23, 18, 38, 0.6);
}

.aiof-hero-player.is-mini .aiof-hero-player__caption,
.aiof-hero-player.is-mini .aiof-hero-player__bar,
.aiof-hero-player.is-mini .aiof-hero-player__play {
	display: none;
}

.aiof-hero-player.is-mini .aiof-hero-player__frame {
	aspect-ratio: 16 / 9;
	border-radius: 18px;
}

.aiof-hero-player.is-mini .aiof-hero-player__restore {
	display: inline-flex;
	width: calc(100% - 16px);
	justify-content: center;
}

.aiof-hero-player .aiof-hero-player__restore[hidden] {
	display: none;
}

/* Hero stage (no video configured) */
.aiof-hero-stage {
	position: relative;
	padding: 18px 14px 34px;
}

.aiof-hero-stage__halo {
	position: absolute;
	inset: 6% 10% 14%;
	border-radius: 40px;
	background: var(--aiof-gradient);
	filter: blur(46px);
	opacity: 0.28;
}

.aiof-hero-stage__shadow {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 4px;
	height: 44px;
	border-radius: 50%;
	background: rgba(49, 26, 92, 0.22);
	filter: blur(22px);
}

.aiof-hero-stage__frame {
	position: relative;
	border-radius: var(--aiof-radius-xl);
	padding: 14px;
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg), var(--aiof-shadow-3d);
	transform: perspective(1400px) rotateX(3.2deg) rotateY(-5.5deg);
	transition: transform 0.5s var(--aiof-ease);
}

.aiof-hero-stage:hover .aiof-hero-stage__frame {
	transform: perspective(1400px) rotateX(0deg) rotateY(-1.5deg) translateY(-4px);
}

.aiof-hero-stage__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 6px 14px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-hero-stage__dots {
	display: inline-flex;
	gap: 5px;
}

.aiof-hero-stage__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e9d5ff;
}

.aiof-hero-stage__dots i:first-child {
	background: #c084fc;
}

.aiof-hero-stage__dots i:last-child {
	background: #fbcfe8;
}

.aiof-hero-stage__live {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-gold-soft);
	color: #92620d;
	border: 1px solid rgba(216, 162, 58, 0.4);
}

.aiof-hero-stage__art {
	position: relative;
	border-radius: var(--aiof-radius-lg);
	overflow: hidden;
	background: var(--aiof-surface-2);
}

.aiof-hero-stage__chips {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aiof-hero-stage__chips span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--aiof-heading);
	font-size: 0.78rem;
	font-weight: 600;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-hero-stage__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 300px;
	color: var(--aiof-muted);
	text-align: center;
	padding: 30px;
}

.aiof-hero-stage__empty strong {
	color: var(--aiof-heading);
}

.aiof-hero-stage__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 8px 4px;
}

.aiof-hero-stage__footer div {
	display: flex;
	flex-direction: column;
}

.aiof-hero-stage__footer span {
	color: var(--aiof-muted);
	font-size: 0.82rem;
}

.aiof-hero-stage__footer strong {
	color: var(--aiof-heading);
	font-family: var(--aiof-font);
}

.aiof-hero-stage__footer a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.9rem;
}

.aiof-float-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 15px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
	animation: aiof-float 6.5s var(--aiof-ease) infinite;
}

.aiof-float-card strong {
	display: block;
	font-size: 0.9rem;
	color: var(--aiof-heading);
	line-height: 1.25;
}

.aiof-float-card span {
	font-size: 0.78rem;
	color: var(--aiof-muted);
}

.aiof-float-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	flex: 0 0 auto;
}

.aiof-float-card__icon--green {
	background: #ecfdf5;
	color: #059669;
}

.aiof-float-card__icon--gold {
	background: var(--aiof-gold-soft);
	color: #92620d;
}

.aiof-float-card--one {
	left: -14px;
	top: 16%;
	animation-delay: 0.2s;
}

.aiof-float-card--two {
	right: -18px;
	top: 42%;
	animation-delay: 1.4s;
}

.aiof-float-card--three {
	left: 6%;
	bottom: -14px;
	animation-delay: 2.6s;
}

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

/* -------------------------------------------------------------------------
 * 7. Homepage sections
 * ---------------------------------------------------------------------- */
.aiof-featured {
	background:
		radial-gradient(46% 60% at 88% 12%, var(--course-soft, #f4efff), transparent 70%),
		linear-gradient(180deg, #ffffff, #fbf9ff);
}

.aiof-featured__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(26px, 3.4vw, 60px);
	align-items: center;
}

.aiof-featured__visual {
	position: relative;
}

.aiof-featured__art {
	position: relative;
	border-radius: var(--aiof-radius-xl);
	padding: 14px;
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg), var(--aiof-shadow-3d);
	transform: perspective(1500px) rotateY(4.5deg);
	transition: transform 0.5s var(--aiof-ease);
}

.aiof-featured__visual:hover .aiof-featured__art {
	transform: perspective(1500px) rotateY(1deg) translateY(-4px);
}

.aiof-featured__badge {
	position: absolute;
	top: 26px;
	left: 26px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(255, 255, 255, 0.95);
	color: var(--course-ink, var(--aiof-violet-strong));
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-featured__price-tag {
	position: absolute;
	right: 26px;
	bottom: 26px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	padding: 12px 18px;
	border-radius: var(--aiof-radius);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--aiof-shadow);
}

.aiof-featured__price-tag span {
	font-size: 0.76rem;
	color: var(--aiof-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aiof-featured__price-tag strong {
	font-size: 1.5rem;
	color: var(--course-ink, var(--aiof-violet-strong));
	font-family: var(--aiof-font);
	letter-spacing: -0.02em;
}

.aiof-featured__float {
	position: absolute;
	left: -18px;
	bottom: 34px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-featured__float strong {
	display: block;
	color: var(--aiof-heading);
	font-size: 0.9rem;
}

.aiof-featured__float span {
	color: var(--aiof-muted);
	font-size: 0.78rem;
}

.aiof-featured__float-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: var(--course-soft, var(--aiof-violet-soft));
	color: var(--float-color, var(--aiof-violet));
}

.aiof-featured__copy h2 {
	margin-bottom: 0.35em;
}

.aiof-featured__text {
	color: var(--aiof-muted);
	font-size: 1.03rem;
}

.aiof-featured__note {
	display: flex;
	gap: 11px;
	padding: 15px 17px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	color: var(--aiof-body);
	font-size: 0.94rem;
}

.aiof-featured__note p {
	margin: 0;
}

.aiof-featured__note .aiof-icon {
	color: var(--aiof-violet);
	margin-top: 3px;
}

.aiof-featured__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.aiof-featured__meta > div {
	padding: 14px 16px;
	border-radius: var(--aiof-radius-sm);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-featured__meta span {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-featured__meta strong {
	color: var(--aiof-heading);
	font-size: 0.95rem;
}

/* Courses slider */
.aiof-courses {
	background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 70%);
}

.aiof-slider {
	position: relative;
}

.aiof-slider__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
	margin-bottom: 26px;
}

.aiof-slider__head .aiof-section-head {
	margin-bottom: 0;
}

.aiof-slider__controls {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.aiof-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
	color: var(--aiof-heading);
	box-shadow: var(--aiof-shadow-xs);
	transition: transform 0.18s var(--aiof-ease), box-shadow 0.18s var(--aiof-ease), background 0.18s var(--aiof-ease);
}

.aiof-slider__arrow:hover:not([disabled]) {
	transform: translateY(-2px);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-slider__arrow[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.aiof-slider__viewport {
	overflow: hidden;
	border-radius: var(--aiof-radius-lg);
	padding: 6px;
	margin: -6px;
	touch-action: pan-y;
}

.aiof-slider__track {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: transform 0.55s var(--aiof-ease);
	will-change: transform;
}

.aiof-slider__slide {
	flex: 0 0 calc((100% - 40px) / 3);
	min-width: 0;
	display: flex;
}

.aiof-slider__slide > * {
	width: 100%;
}

.aiof-slider__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 26px;
}

.aiof-slider__dots {
	display: flex;
	gap: 8px;
}

.aiof-slider__dots button {
	width: 32px;
	height: 6px;
	border-radius: var(--aiof-radius-pill);
	border: 0;
	background: #e6defa;
	padding: 0;
	transition: background 0.2s var(--aiof-ease), width 0.2s var(--aiof-ease);
}

.aiof-slider__dots button[aria-selected="true"] {
	width: 46px;
	background: var(--aiof-gradient);
}

.aiof-slider__hint {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.85rem;
}

.aiof-course-grid {
	display: grid;
	gap: 22px;
}

.aiof-course-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Why */
.aiof-why {
	background: #fff;
}

.aiof-why__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.aiof-why__card {
	position: relative;
	padding: 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	transition: transform 0.25s var(--aiof-ease), box-shadow 0.25s var(--aiof-ease);
	overflow: hidden;
}

.aiof-why__card::after {
	content: "";
	position: absolute;
	inset: auto -30% -60% auto;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--aiof-gradient-soft);
	z-index: 0;
}

.aiof-why__card:hover {
	transform: translateY(-5px);
	box-shadow: var(--aiof-shadow);
}

.aiof-why__card > * {
	position: relative;
	z-index: 1;
}

.aiof-why__index {
	position: absolute;
	top: 18px;
	right: 22px;
	font-family: var(--aiof-font);
	font-size: 0.86rem;
	font-weight: 800;
	color: #d9cdf6;
	letter-spacing: 0.08em;
}

.aiof-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 18px;
	background: var(--aiof-gradient);
	color: #fff;
	box-shadow: 0 16px 28px -16px rgba(109, 40, 217, 0.75);
	margin-bottom: 18px;
}

.aiof-why__card h3 {
	margin-bottom: 0.4em;
}

.aiof-why__card p {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.95rem;
}

/* Benefits */
.aiof-benefits {
	background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
}

.aiof-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(26px, 3vw, 54px);
	align-items: start;
}

.aiof-benefits__note {
	display: flex;
	gap: 11px;
	padding: 15px 17px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-gold-soft);
	border: 1px solid rgba(216, 162, 58, 0.34);
	color: #73510f;
	font-size: 0.93rem;
	margin-top: 8px;
}

.aiof-benefits__note p {
	margin: 0;
}

.aiof-benefits__mini {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 18px;
	padding: 15px 18px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-benefits__mini strong {
	display: block;
	color: var(--aiof-heading);
}

.aiof-benefits__mini span {
	color: var(--aiof-muted);
	font-size: 0.85rem;
}

.aiof-benefits__mini-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: #ecfdf5;
	color: var(--aiof-emerald);
	flex: 0 0 auto;
}

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

.aiof-benefits__item {
	display: flex;
	gap: 14px;
	padding: 22px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	transition: transform 0.25s var(--aiof-ease), box-shadow 0.25s var(--aiof-ease);
}

.aiof-benefits__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--aiof-shadow);
}

.aiof-benefits__item h3 {
	margin-bottom: 0.3em;
	font-size: 1.06rem;
}

.aiof-benefits__item p {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.92rem;
}

.aiof-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	flex: 0 0 auto;
}

/* Steps */
.aiof-steps {
	background: #fff;
}

.aiof-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	counter-reset: aiof-step;
}

.aiof-step {
	position: relative;
	padding: 24px 22px;
	border-radius: var(--aiof-radius-lg);
	background: linear-gradient(180deg, #ffffff, #fbf9ff);
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-step::before {
	content: "";
	position: absolute;
	top: 46px;
	right: -22px;
	width: 22px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--aiof-line-strong) 0 6px, transparent 6px 12px);
}

.aiof-step:last-child::before {
	display: none;
}

.aiof-step__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.aiof-step__number {
	font-family: var(--aiof-font);
	font-size: 1.5rem;
	font-weight: 800;
	color: #ded4f0;
	letter-spacing: -0.02em;
}

.aiof-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 17px;
	background: #fff;
	border: 1px solid var(--aiof-line);
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-step h3 {
	font-size: 1.08rem;
	margin-bottom: 0.35em;
}

.aiof-step p {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.93rem;
}

.aiof-steps__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 30px;
	padding: 22px 26px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-steps__payment {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.aiof-steps__payment-label {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-steps__payment strong {
	font-family: var(--aiof-font);
	font-size: 1.45rem;
	color: var(--aiof-heading);
	letter-spacing: 0.02em;
}

.aiof-steps__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Reviews */
.aiof-reviews {
	background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 60%);
}

.aiof-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}

.aiof-reviews__grid--two {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.aiof-reviews__grid--stories {
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.aiof-reviews__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
}

.aiof-reviews__footer p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.88rem;
}

.aiof-reviews__footer .aiof-icon {
	color: var(--aiof-emerald);
}

.aiof-stories__note {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--aiof-radius);
	background: #ecfdf5;
	border: 1px solid rgba(5, 150, 105, 0.24);
	color: #14532d;
	margin-bottom: 26px;
	font-size: 0.94rem;
}

.aiof-stories__note p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 8. Course cards and artwork
 * ---------------------------------------------------------------------- */
.aiof-course-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	overflow: hidden;
	transition: transform 0.28s var(--aiof-ease), box-shadow 0.28s var(--aiof-ease), border-color 0.28s var(--aiof-ease);
}

.aiof-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--aiof-shadow-lg);
	border-color: color-mix(in srgb, var(--course-from, #7c3aed) 34%, #ffffff);
}

.aiof-course-card__art {
	position: relative;
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-course-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--course-ink, var(--aiof-violet-strong));
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-course-card__price {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 7px 14px;
	border-radius: var(--aiof-radius-pill);
	background: var(--course-from, var(--aiof-violet));
	color: #fff;
	font-family: var(--aiof-font);
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 14px 24px -14px rgba(23, 18, 38, 0.6);
}

.aiof-course-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 22px 20px;
}

.aiof-course-card__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-course-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 26px;
	padding: 0 7px;
	border-radius: 9px;
	background: var(--course-soft, var(--aiof-violet-soft));
	color: var(--course-ink, var(--aiof-violet-strong));
	letter-spacing: 0.04em;
}

.aiof-course-card h3 {
	margin-bottom: 0.45em;
	font-size: 1.18rem;
	line-height: 1.35;
}

.aiof-course-card h3 a {
	color: var(--aiof-heading);
}

.aiof-course-card h3 a:hover {
	color: var(--course-ink, var(--aiof-violet-strong));
	text-decoration: none;
}

.aiof-course-card__text {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.93rem;
}

.aiof-course-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.aiof-course-card__facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	font-size: 0.79rem;
	color: var(--aiof-body);
}

.aiof-course-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
}

.aiof-course-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--course-ink, var(--aiof-violet-strong));
}

.aiof-course-card__enroll {
	display: inline-flex;
	align-items: center;
	padding: 9px 17px;
	border-radius: var(--aiof-radius-pill);
	background: linear-gradient(135deg, var(--course-from, #7c3aed), var(--course-to, #d946ef));
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	box-shadow: 0 14px 26px -16px rgba(23, 18, 38, 0.6);
}

.aiof-course-card__enroll:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}

/* Generated course artwork */
.course-art {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background:
		radial-gradient(120% 110% at 12% 8%, var(--art-soft, #f4efff) 0%, transparent 58%),
		linear-gradient(140deg, var(--art-from, #7c3aed) 0%, var(--art-to, #d946ef) 100%);
	isolation: isolate;
}

.course-art--image {
	aspect-ratio: 4 / 3;
	background: var(--aiof-surface-2);
}

.course-art--image img,
.course-art__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.course-art--hero,
.course-art--featured {
	aspect-ratio: 16 / 11;
	border-radius: var(--aiof-radius-lg);
}

.course-art--thumb {
	aspect-ratio: 1 / 1;
}

.course-art__mesh {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: 0.5;
	mask-image: radial-gradient(80% 80% at 60% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(80% 80% at 60% 30%, #000 20%, transparent 78%);
}

.course-art__glow {
	position: absolute;
	width: 210px;
	height: 210px;
	right: -60px;
	top: -70px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.38);
	filter: blur(6px);
}

.course-art__ring {
	position: absolute;
	left: 18%;
	bottom: -34%;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	border: 2px dashed rgba(255, 255, 255, 0.42);
}

.course-art__icon {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--art-ink, #5b21b6);
	box-shadow: 0 26px 46px -22px rgba(23, 18, 38, 0.65);
}

.course-art--featured .course-art__icon,
.course-art--hero .course-art__icon {
	width: 118px;
	height: 118px;
	border-radius: 34px;
}

.course-art__index {
	position: absolute;
	left: 18px;
	bottom: 14px;
	font-family: var(--aiof-font);
	font-size: 2rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: -0.03em;
	line-height: 1;
}

.course-art__label {
	position: absolute;
	right: 18px;
	top: 16px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.3em;
	color: rgba(255, 255, 255, 0.85);
}

.course-art__spark {
	position: absolute;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
}

.course-art__spark--one {
	top: 26%;
	right: 22%;
}

.course-art__spark--two {
	bottom: 30%;
	left: 20%;
	width: 6px;
	height: 6px;
	background: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------------------
 * 9. Reviews and YouTube facades
 * ---------------------------------------------------------------------- */
.aiof-review-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	overflow: hidden;
	transition: transform 0.25s var(--aiof-ease), box-shadow 0.25s var(--aiof-ease);
}

.aiof-review-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--aiof-shadow);
}

.aiof-review-card__video {
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-review-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 22px 22px;
}

.aiof-review-card__quote {
	position: absolute;
	top: 18px;
	right: 20px;
	color: #ece1ff;
}

.aiof-review-card__rating {
	margin-bottom: 12px;
}

.aiof-stars {
	display: inline-flex;
	gap: 3px;
	color: var(--aiof-gold);
}

.aiof-star {
	display: inline-flex;
	color: #ded4f0;
}

.aiof-star.is-on {
	color: var(--aiof-gold);
}

.aiof-review-card blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	color: var(--aiof-body);
	font-size: 0.97rem;
	line-height: 1.75;
}

.aiof-review-card__person {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px dashed var(--aiof-line-strong);
}

.aiof-review-card__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #fff;
	box-shadow: var(--aiof-shadow-xs);
	flex: 0 0 auto;
}

.aiof-review-card__avatar--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aiof-gradient);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.aiof-review-card__person strong {
	display: block;
	color: var(--aiof-heading);
	font-size: 0.98rem;
}

.aiof-review-card__person span {
	color: var(--aiof-muted);
	font-size: 0.83rem;
}

.aiof-review-card__course {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	padding: 3px 10px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong) !important;
	align-self: flex-start;
}

.aiof-yt {
	position: relative;
}

.aiof-yt__facade {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #100a1f;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
}

.aiof-yt__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--aiof-ease);
}

.aiof-yt__facade:hover .aiof-yt__thumb {
	transform: scale(1.04);
}

.aiof-yt__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 10, 31, 0.05) 20%, rgba(16, 10, 31, 0.62) 100%);
}

.aiof-yt__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: #c026d3;
	box-shadow: 0 22px 40px -18px rgba(16, 10, 31, 0.85);
	transition: transform 0.22s var(--aiof-ease);
}

.aiof-yt__facade:hover .aiof-yt__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.aiof-yt__badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(16, 10, 31, 0.7);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.aiof-yt iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
}

/* -------------------------------------------------------------------------
 * 10. Mentor, FAQ, blog cards, CTA
 * ---------------------------------------------------------------------- */
.aiof-mentor {
	background:
		radial-gradient(48% 60% at 12% 10%, #f6f1ff 0%, transparent 70%),
		linear-gradient(180deg, #ffffff, #fbf9ff);
}

.aiof-mentor__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(26px, 3.4vw, 60px);
	align-items: center;
}

.aiof-mentor__visual {
	position: relative;
}

.aiof-mentor__frame {
	position: relative;
	border-radius: var(--aiof-radius-xl);
	padding: 12px;
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg), var(--aiof-shadow-3d);
}

.aiof-mentor__accent {
	position: absolute;
	inset: auto 22px -16px 22px;
	height: 26px;
	border-radius: 50%;
	background: rgba(49, 26, 92, 0.18);
	filter: blur(18px);
}

.aiof-mentor-portrait {
	position: relative;
	border-radius: var(--aiof-radius-lg);
	overflow: hidden;
	background: var(--aiof-surface-2);
}

.aiof-mentor-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.aiof-mentor-portrait__fallback {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, #2b1b52 0%, #6d28d9 55%, #c026d3 100%);
	color: #fff;
	overflow: hidden;
}

.aiof-mentor-portrait__mesh {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 42px 42px;
	opacity: 0.5;
}

.aiof-mentor-portrait__initials {
	position: relative;
	font-family: var(--aiof-font);
	font-size: clamp(3rem, 6vw, 5.2rem);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-shadow: 0 22px 40px rgba(16, 10, 31, 0.5);
}

.aiof-mentor-portrait__badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	color: var(--aiof-violet-strong);
	font-size: 0.82rem;
	font-weight: 700;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-mentor-portrait--small {
	border-radius: var(--aiof-radius);
	width: 72px;
	flex: 0 0 auto;
}

.aiof-mentor-portrait--small img,
.aiof-mentor-portrait--small .aiof-mentor-portrait__fallback {
	aspect-ratio: 1 / 1;
}

.aiof-mentor-portrait--small .aiof-mentor-portrait__initials {
	font-size: 1.3rem;
}

.aiof-mentor-portrait--small .aiof-mentor-portrait__badge {
	display: none;
}

.aiof-mentor__card {
	position: absolute;
	right: -16px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-mentor__card strong {
	display: block;
	color: var(--aiof-heading);
	font-size: 0.92rem;
}

.aiof-mentor__card span {
	color: var(--aiof-muted);
	font-size: 0.8rem;
}

.aiof-mentor__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 15px;
	background: var(--aiof-gold-soft);
	color: #92620d;
}

.aiof-mentor__copy h2 {
	margin-bottom: 0.28em;
}

.aiof-mentor__role {
	color: var(--aiof-violet-strong);
	font-weight: 600;
	margin-bottom: 12px;
}

.aiof-mentor__bio {
	color: var(--aiof-body);
}

.aiof-mentor__subjects {
	margin-top: 22px;
}

.aiof-mentor__subjects > span {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aiof-muted);
	margin-bottom: 10px;
}

.aiof-faq {
	background: #fff;
}

.aiof-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(26px, 3vw, 54px);
	align-items: start;
}

.aiof-faq__help {
	display: grid;
	gap: 10px;
	padding: 20px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-faq__help strong {
	color: var(--aiof-heading);
}

.aiof-faq__help p {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.92rem;
}

.aiof-faq__help-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: #fff;
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-faq__list {
	display: grid;
	gap: 12px;
}

.aiof-faq__item {
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-xs);
	overflow: hidden;
	transition: border-color 0.2s var(--aiof-ease), box-shadow 0.2s var(--aiof-ease);
}

.aiof-faq__item[open] {
	border-color: rgba(124, 58, 237, 0.34);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--aiof-heading);
	font-family: var(--aiof-font-bn);
}

.aiof-faq__item summary::-webkit-details-marker {
	display: none;
}

.aiof-faq__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	flex: 0 0 auto;
	transition: transform 0.22s var(--aiof-ease), background 0.22s var(--aiof-ease);
}

.aiof-faq__item[open] .aiof-faq__toggle {
	transform: rotate(45deg);
	background: var(--aiof-gradient);
	color: #fff;
}

.aiof-faq__answer {
	padding: 0 20px 20px;
	color: var(--aiof-body);
	font-size: 0.96rem;
}

.aiof-faq__answer p:last-child {
	margin-bottom: 0;
}

.aiof-blog {
	background: linear-gradient(180deg, #fbf9ff 0%, #ffffff 60%);
}

.aiof-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 26px;
}

.aiof-blog__head .aiof-section-head {
	margin-bottom: 0;
}

.aiof-blog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
}

.aiof-blog__grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiof-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	overflow: hidden;
	transition: transform 0.25s var(--aiof-ease), box-shadow 0.25s var(--aiof-ease);
}

.aiof-post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--aiof-shadow);
}

.aiof-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--aiof-surface-2);
}

.aiof-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--aiof-ease);
}

.aiof-post-card:hover .aiof-post-card__media img {
	transform: scale(1.045);
}

.aiof-post-card__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 100%;
	background: linear-gradient(140deg, #f6f1ff, #fdf2ff 60%, #f2f7ff);
	color: var(--aiof-violet);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.aiof-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px;
}

.aiof-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 0.8rem;
	color: var(--aiof-muted);
}

.aiof-post-card__category {
	padding: 4px 11px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	font-weight: 600;
}

.aiof-post-card h3 {
	font-size: 1.14rem;
	line-height: 1.4;
	margin-bottom: 0.45em;
}

.aiof-post-card h3 a {
	color: var(--aiof-heading);
}

.aiof-post-card h3 a:hover {
	color: var(--aiof-violet-strong);
	text-decoration: none;
}

.aiof-post-card__body p {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.93rem;
}

.aiof-post-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 18px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--aiof-violet-strong);
}

.aiof-cta-section {
	padding-bottom: clamp(60px, 5vw, 110px);
}

.aiof-cta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
	padding: clamp(30px, 4vw, 56px);
	border-radius: var(--aiof-radius-xl);
	background: linear-gradient(135deg, #2a1458 0%, #6d28d9 48%, #c026d3 100%);
	color: #f6f1ff;
	overflow: hidden;
	box-shadow: var(--aiof-shadow-lg);
	isolation: isolate;
}

.aiof-cta__orb {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	filter: blur(2px);
	z-index: 0;
}

.aiof-cta__orb--one {
	width: 260px;
	height: 260px;
	top: -90px;
	right: 12%;
}

.aiof-cta__orb--two {
	width: 190px;
	height: 190px;
	bottom: -80px;
	left: 6%;
	background: rgba(216, 162, 58, 0.24);
}

.aiof-cta__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(70% 70% at 40% 40%, #000 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(70% 70% at 40% 40%, #000 20%, transparent 80%);
	z-index: 0;
}

.aiof-cta__copy,
.aiof-cta__panel {
	position: relative;
	z-index: 1;
}

.aiof-cta__copy h2 {
	color: #fff;
	margin-bottom: 0.35em;
}

.aiof-cta__copy p {
	color: rgba(246, 241, 255, 0.88);
	margin-bottom: 0;
}

.aiof-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

.aiof-cta__panel {
	padding: 24px;
	border-radius: var(--aiof-radius-lg);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(10px);
}

.aiof-cta__panel-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	margin-bottom: 16px;
}

.aiof-cta__panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.aiof-cta__panel li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.aiof-cta__panel li > div {
	min-width: 0;
}

.aiof-cta__panel li span {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	display: block;
}

.aiof-cta__panel li a,
.aiof-cta__panel li strong {
	color: #fff;
	font-weight: 600;
	font-size: 0.96rem;
	overflow-wrap: anywhere;
}

.aiof-cta__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	flex: 0 0 auto;
}

.aiof-cta__panel-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.86);
}

/* -------------------------------------------------------------------------
 * 11. Footer
 * ---------------------------------------------------------------------- */
.aiof-footer {
	position: relative;
	background: linear-gradient(180deg, #1b1233 0%, #150e27 100%);
	color: #cdc3e4;
	padding: clamp(48px, 4vw, 76px) 0 26px;
	overflow: hidden;
}

.aiof-footer__glow {
	position: absolute;
	top: -120px;
	left: 12%;
	width: 420px;
	height: 320px;
	background: radial-gradient(circle, rgba(124, 58, 237, 0.45), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}

.aiof-footer .aiof-container {
	position: relative;
	z-index: 1;
}

.aiof-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr)) minmax(0, 1.1fr);
	gap: 34px;
	padding-bottom: 34px;
}

.aiof-footer__contact li > * {
	min-width: 0;
}

.aiof-footer__contact a {
	overflow-wrap: anywhere;
}

.aiof-footer__brand p {
	margin: 16px 0 0;
	font-size: 0.92rem;
	color: #b4a8d3;
}

.aiof-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.aiof-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: #e9d5ff;
}

.aiof-footer__social a:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	text-decoration: none;
}

.aiof-footer__column h2 {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}

.aiof-footer__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.aiof-footer__column a {
	color: #cdc3e4;
	font-size: 0.93rem;
}

.aiof-footer__column a:hover {
	color: #fff;
}

.aiof-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.aiof-footer__contact li .aiof-icon {
	color: #a78bfa;
	margin-top: 4px;
}

.aiof-footer__contact .aiof-payment-badges {
	margin-top: 16px;
}

.aiof-footer__contact .aiof-payment-badge {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: #ece4ff;
}

.aiof-footer__contact .aiof-payment-badges__number {
	color: #b4a8d3;
}

.aiof-footer__contact .aiof-payment-badges__number strong {
	color: #fff;
}

.aiof-footer__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.86rem;
	color: #b4a8d3;
}

.aiof-footer__trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aiof-footer__trust .aiof-icon {
	color: #a78bfa;
}

.aiof-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 20px;
	font-size: 0.88rem;
}

.aiof-footer__bottom p {
	margin: 0;
}

.aiof-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.aiof-footer__disclaimer {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px dashed rgba(255, 255, 255, 0.14);
	font-size: 0.8rem;
	color: #9c90bd;
	max-width: 92ch;
}

.aiof-whatsapp-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 18px;
	border-radius: var(--aiof-radius-pill);
	background: linear-gradient(135deg, #17c26b, #059669);
	color: #fff;
	font-weight: 600;
	font-size: 0.92rem;
	box-shadow: 0 22px 44px -18px rgba(5, 150, 105, 0.75);
}

.aiof-whatsapp-float:hover {
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
 * 12. Page hero, prose, course single
 * ---------------------------------------------------------------------- */
.aiof-page-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(38px, 4vw, 74px) 0 clamp(26px, 3vw, 46px);
	background: linear-gradient(180deg, #fdfcff 0%, #f7f3ff 60%, #ffffff 100%);
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: 32px;
	align-items: center;
}

.aiof-page-hero__copy h1 {
	margin-bottom: 0.32em;
}

.aiof-page-hero__text {
	max-width: 66ch;
	margin: 0;
	color: var(--aiof-muted);
	font-size: 1.03rem;
}

.aiof-page-hero__art {
	position: relative;
	min-height: 210px;
}

.aiof-page-hero__orb {
	position: absolute;
	right: 8%;
	top: 6%;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, 0.5), rgba(168, 85, 247, 0));
}

.aiof-page-hero__ring {
	position: absolute;
	right: 20%;
	bottom: 0;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	border: 2px dashed rgba(124, 58, 237, 0.28);
}

.aiof-page-hero__card {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
	font-weight: 700;
	color: var(--aiof-heading);
	font-size: 0.9rem;
}

.aiof-page-hero__card b {
	font-weight: 700;
}

.aiof-page-hero__card--one {
	top: 12%;
	left: 6%;
	transform: rotate(-4deg);
}

.aiof-page-hero__card--one .aiof-icon {
	color: var(--aiof-fuchsia);
}

.aiof-page-hero__card--two {
	bottom: 12%;
	right: 4%;
	transform: rotate(3deg);
}

.aiof-page-hero__card--two .aiof-icon {
	color: var(--aiof-emerald);
}

.aiof-prose {
	color: var(--aiof-body);
	font-size: 1.02rem;
	line-height: 1.85;
}

.aiof-prose > h2 {
	margin-top: 1.6em;
}

.aiof-prose > h3 {
	margin-top: 1.4em;
}

.aiof-prose ul,
.aiof-prose ol {
	padding-left: 1.35rem;
}

.aiof-prose li {
	margin-bottom: 0.5em;
}

.aiof-prose img {
	border-radius: var(--aiof-radius);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-prose blockquote {
	margin: 1.6em 0;
	padding: 18px 22px;
	border-left: 4px solid var(--aiof-violet);
	border-radius: 0 var(--aiof-radius) var(--aiof-radius) 0;
	background: var(--aiof-surface-2);
	color: var(--aiof-heading);
}

.aiof-prose blockquote p:last-child {
	margin-bottom: 0;
}

.aiof-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: 0.95rem;
}

.aiof-prose th,
.aiof-prose td {
	padding: 11px 13px;
	border: 1px solid var(--aiof-line);
	text-align: left;
}

.aiof-prose th {
	background: var(--aiof-surface-2);
	color: var(--aiof-heading);
}

.aiof-prose code {
	padding: 2px 7px;
	border-radius: 7px;
	background: var(--aiof-surface-3);
	font-size: 0.92em;
}

.aiof-prose pre {
	padding: 16px 18px;
	border-radius: var(--aiof-radius-sm);
	background: #1b1233;
	color: #f4efff;
	overflow-x: auto;
}

.aiof-prose pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}

.aiof-prose .wp-block-button__link,
.aiof-prose .wp-element-button {
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-gradient);
	color: #fff;
	padding: 12px 22px;
	font-weight: 600;
}

.aiof-prose figcaption {
	margin-top: 8px;
	font-size: 0.85rem;
	color: var(--aiof-muted);
	text-align: center;
}

.aiof-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
	font-size: 0.9rem;
}

.aiof-page-links a,
.aiof-page-links > span {
	padding: 5px 12px;
	border-radius: var(--aiof-radius-pill);
	border: 1px solid var(--aiof-line-strong);
	background: #fff;
}

.aiof-page-links > span {
	border-style: dashed;
	color: var(--aiof-muted);
}

.aiof-edit-link {
	margin-top: 20px;
	font-size: 0.86rem;
}

/* Course single */
.aiof-course-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 4vw, 68px) 0 clamp(40px, 4vw, 72px);
	background:
		radial-gradient(52% 60% at 84% 6%, var(--course-soft, #f4efff), transparent 68%),
		linear-gradient(180deg, #fdfcff 0%, #f8f5ff 60%, #ffffff 100%);
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-course-hero__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.aiof-course-hero__wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(40% 50% at 6% 92%, color-mix(in srgb, var(--course-to, #d946ef) 14%, transparent), transparent 70%);
}

.aiof-course-hero__orb {
	position: absolute;
	width: 280px;
	height: 280px;
	top: -110px;
	right: -70px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--course-from, #7c3aed) 40%, transparent), transparent 70%);
}

.aiof-course-hero__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(109, 40, 217, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(109, 40, 217, 0.06) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 25%, transparent 78%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 25%, transparent 78%);
}

.aiof-course-hero .aiof-container {
	position: relative;
	z-index: 1;
}

.aiof-course-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(26px, 3.4vw, 58px);
	align-items: center;
}

.aiof-course-hero__copy h1 {
	margin-bottom: 0.3em;
}

.aiof-course-hero__text {
	max-width: 60ch;
	color: var(--aiof-muted);
	font-size: 1.03rem;
}

.aiof-course-hero__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
	padding: 18px 22px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-course-hero__price span {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-course-hero__price strong {
	font-family: var(--aiof-font);
	font-size: 2rem;
	letter-spacing: -0.02em;
	color: var(--course-ink, var(--aiof-violet-strong));
}

.aiof-course-hero__payment {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: var(--aiof-radius-pill);
	background: var(--course-soft, var(--aiof-violet-soft));
	color: var(--course-ink, var(--aiof-violet-strong)) !important;
	font-weight: 600;
}

.aiof-course-hero__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 18px 0 0;
	color: var(--aiof-muted);
	font-size: 0.87rem;
}

.aiof-course-hero__note .aiof-icon {
	color: var(--aiof-violet);
}

.aiof-course-hero__visual {
	position: relative;
}

.aiof-course-hero__art-frame {
	position: relative;
	border-radius: var(--aiof-radius-xl);
	padding: 13px;
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg), var(--aiof-shadow-3d);
	transform: perspective(1500px) rotateY(4deg);
}

.aiof-course-hero__badge {
	position: absolute;
	top: 24px;
	left: 24px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: var(--aiof-radius-pill);
	background: rgba(255, 255, 255, 0.95);
	color: var(--course-ink, var(--aiof-violet-strong));
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-course-hero__price-tag {
	position: absolute;
	right: 26px;
	bottom: 26px;
	padding: 12px 18px;
	border-radius: var(--aiof-radius);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: var(--aiof-shadow);
	text-align: right;
}

.aiof-course-hero__price-tag span {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-course-hero__price-tag strong {
	font-family: var(--aiof-font);
	font-size: 1.4rem;
	color: var(--course-ink, var(--aiof-violet-strong));
	letter-spacing: -0.02em;
}

.aiof-course-hero__float {
	position: absolute;
	left: -16px;
	bottom: 28px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-course-hero__float span:first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: var(--course-soft, var(--aiof-violet-soft));
	color: var(--float-color, var(--aiof-violet));
}

.aiof-course-hero__float strong {
	display: block;
	color: var(--aiof-heading);
	font-size: 0.9rem;
}

.aiof-course-hero__float span:last-child {
	color: var(--aiof-muted);
	font-size: 0.78rem;
}

.aiof-course-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: clamp(26px, 3vw, 46px);
	align-items: start;
}

.aiof-course-main > * + * {
	margin-top: 26px;
}

.aiof-course-panel {
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-course-panel h2 {
	margin-bottom: 0.6em;
}

.aiof-course-panel--soft {
	display: flex;
	gap: 16px;
	background: var(--aiof-gradient-soft);
}

.aiof-course-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 17px;
	background: #fff;
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow-xs);
	flex: 0 0 auto;
}

.aiof-course-panel--soft p {
	margin-bottom: 10px;
}

.aiof-course-outcomes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.aiof-course-outcomes li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.aiof-course-outcomes li .aiof-icon {
	color: var(--aiof-emerald);
	margin-top: 3px;
}

.aiof-curriculum {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: aiof-lesson;
}

.aiof-curriculum li {
	display: flex;
	gap: 16px;
	padding: 16px 18px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-curriculum__number {
	font-family: var(--aiof-font);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--aiof-violet);
	flex: 0 0 auto;
}

.aiof-curriculum h3 {
	font-size: 1.05rem;
	margin-bottom: 0.25em;
}

.aiof-curriculum p {
	margin: 0;
	color: var(--aiof-muted);
	font-size: 0.93rem;
}

.aiof-course-reviews h2 {
	margin-bottom: 0.7em;
}

.aiof-course-sidebar {
	display: grid;
	gap: 20px;
	position: sticky;
	top: calc(var(--aiof-header-height) + 18px);
}

.aiof-enroll-card {
	padding: 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-enroll-card__eyebrow {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aiof-muted);
	margin-bottom: 12px;
}

.aiof-enroll-card__price span {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-enroll-card__price strong {
	font-family: var(--aiof-font);
	font-size: 2.1rem;
	letter-spacing: -0.03em;
	color: var(--course-ink, var(--aiof-violet-strong));
}

.aiof-enroll-card__facts {
	list-style: none;
	margin: 16px 0 20px;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: 0.9rem;
}

.aiof-enroll-card__facts li {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--aiof-body);
}

.aiof-enroll-card__facts .aiof-icon {
	color: var(--aiof-violet);
}

.aiof-enroll-card .aiof-button + .aiof-button {
	margin-top: 10px;
}

.aiof-enroll-card__payments {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px dashed var(--aiof-line-strong);
}

.aiof-enroll-card__payments > span {
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-enroll-card__note {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 18px 0 0;
	color: var(--aiof-muted);
	font-size: 0.82rem;
}

.aiof-enroll-card__note .aiof-icon {
	color: var(--aiof-emerald);
}

.aiof-side-mentor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-side-mentor span {
	display: block;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-side-mentor strong {
	display: block;
	color: var(--aiof-heading);
}

.aiof-side-mentor a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.86rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 12. Catalogue, enrollment, confirmation
 * ---------------------------------------------------------------------- */

/* 12.1 Course catalogue -------------------------------------------------- */
.aiof-catalogue {
	position: relative;
}

.aiof-catalogue__intro {
	max-width: 680px;
}

.aiof-catalogue__count {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 20px;
	padding: 9px 17px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-violet-soft);
	box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.14);
	color: var(--aiof-violet-strong);
	font-size: 0.85rem;
	font-weight: 700;
}

.aiof-catalogue__help {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 34px;
	padding: 20px 22px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
}

.aiof-catalogue__help p {
	margin: 0;
	font-size: 0.95rem;
}

.aiof-catalogue__help strong {
	display: block;
	color: var(--aiof-heading);
}

.aiof-catalogue__help-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: #fff;
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-catalogue__help .aiof-button {
	margin-left: auto;
	flex: 0 0 auto;
}

/* 12.2 Enrollment layout ------------------------------------------------ */
.aiof-enroll {
	padding-top: 54px;
}

.aiof-enroll__layout {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.aiof-enroll__aside {
	display: grid;
	gap: 22px;
	position: sticky;
	top: calc(var(--aiof-header-height) + 22px);
}

.aiof-enroll__main {
	display: grid;
	gap: 22px;
	min-width: 0;
}

/* 12.3 Payment panel ---------------------------------------------------- */
.aiof-payment-panel {
	padding: 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-payment-panel h2 {
	margin: 8px 0 10px;
	font-size: 1.32rem;
}

.aiof-payment-panel > p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--aiof-body);
}

.aiof-payment-number {
	margin: 20px 0;
	padding: 18px 18px 16px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-gradient-soft);
	border: 1px dashed var(--aiof-line-strong);
	text-align: center;
}

.aiof-payment-number span {
	display: block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-payment-number strong {
	display: block;
	margin: 6px 0 12px;
	font-family: var(--aiof-font);
	font-size: 1.72rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--aiof-heading);
}

.aiof-payment-methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.aiof-payment-methods li {
	padding: 13px 15px;
	border-radius: var(--aiof-radius-sm);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	border-left: 3px solid var(--method-color, var(--aiof-violet));
}

.aiof-payment-methods__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--aiof-heading);
	font-size: 0.95rem;
}

.aiof-payment-methods__name i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--method-color, var(--aiof-violet));
	box-shadow: 0 0 0 4px var(--method-soft, var(--aiof-violet-soft));
}

.aiof-payment-methods p {
	margin: 5px 0 0;
	font-size: 0.86rem;
	color: var(--aiof-muted);
}

.aiof-payment-warning {
	display: flex;
	gap: 12px;
	padding: 15px 16px;
	border-radius: var(--aiof-radius-sm);
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: var(--aiof-amber);
}

.aiof-payment-warning .aiof-icon {
	flex: 0 0 auto;
	margin-top: 1px;
}

.aiof-payment-warning p {
	margin: 0;
	font-size: 0.85rem;
	color: #7c4a06;
}

.aiof-payment-panel__links {
	display: grid;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed var(--aiof-line-strong);
}

/* 12.4 Enrollment steps ------------------------------------------------- */
.aiof-enroll-steps {
	padding: 24px 22px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-enroll-steps h2 {
	margin: 0 0 14px;
	font-size: 1.08rem;
}

.aiof-enroll-steps ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	counter-reset: none;
}

.aiof-enroll-steps li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.aiof-enroll-steps li span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--aiof-line-strong);
	color: var(--aiof-violet);
	font-size: 0.76rem;
	font-weight: 800;
}

.aiof-enroll-steps li p {
	margin: 4px 0 0;
	font-size: 0.9rem;
}

/* 12.5 Enrollment form card -------------------------------------------- */
.aiof-form-card {
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
	overflow: hidden;
}

.aiof-form-card__head {
	padding: 26px 28px 22px;
	background: var(--aiof-gradient-soft);
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-form-card__head h2 {
	margin: 6px 0 10px;
	font-size: 1.5rem;
}

.aiof-form-card__head p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--aiof-body);
	max-width: 62ch;
}

.aiof-form-card > .aiof-alert {
	margin: 22px 28px 0;
}

.aiof-enroll-form {
	padding: 4px 28px 28px;
}

.aiof-form-section {
	padding: 24px 0;
	border-bottom: 1px dashed var(--aiof-line-strong);
}

.aiof-form-section:last-of-type {
	border-bottom: 0;
}

.aiof-form-section__title {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 18px;
	font-size: 1.06rem;
}

.aiof-form-section__title span {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 11px;
	background: var(--aiof-gradient);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 800;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-form-section--confirm {
	margin-top: 22px;
	padding: 24px 22px;
	border: 1px solid var(--aiof-line);
	border-radius: var(--aiof-radius);
	background: var(--aiof-surface-2);
}

.aiof-form-section--confirm .aiof-form-section__title {
	margin-bottom: 14px;
}

.aiof-form-section--confirm .aiof-checkbox + .aiof-checkbox {
	margin-top: 4px;
}

.aiof-form-section--confirm .aiof-button {
	margin-top: 20px;
}

.aiof-upload {
	display: block;
}

.aiof-upload__preview strong {
	display: block;
}

.aiof-enroll-help {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-surface-3);
	border: 1px solid var(--aiof-line);
}

.aiof-enroll-help > .aiof-icon {
	flex: 0 0 auto;
	color: var(--aiof-violet);
}

.aiof-enroll-help p {
	margin: 3px 0 0;
	font-size: 0.88rem;
	color: var(--aiof-muted);
}

.aiof-enroll-help .aiof-button {
	margin-left: auto;
	flex: 0 0 auto;
}

/* 12.6 Confirmation ----------------------------------------------------- */
.aiof-confirmation__hero {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.aiof-confirmation__icon {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	margin: 0 auto 20px;
	border-radius: 26px;
	background: var(--aiof-gradient);
	color: #fff;
	box-shadow: var(--aiof-shadow-lg);
}

.aiof-confirmation__icon--warn {
	background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.aiof-confirmation__hero h1 {
	margin: 10px 0 14px;
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
}

.aiof-confirmation__hero > p {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--aiof-body);
}

.aiof-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 22px;
	padding: 10px 20px;
	border-radius: var(--aiof-radius-pill);
	font-size: 0.9rem;
	font-weight: 700;
	background: var(--aiof-surface-3);
	color: var(--aiof-heading);
	box-shadow: inset 0 0 0 1px var(--aiof-line-strong);
}

.aiof-status i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

.aiof-status--pending {
	background: #fffbeb;
	color: #92580a;
	box-shadow: inset 0 0 0 1px #fde68a;
}

.aiof-status--info {
	background: #eff6ff;
	color: #1d4ed8;
	box-shadow: inset 0 0 0 1px #bfdbfe;
}

.aiof-status--approved {
	background: #ecfdf5;
	color: #047857;
	box-shadow: inset 0 0 0 1px #a7f3d0;
}

.aiof-status--rejected {
	background: #fff1f2;
	color: #be123c;
	box-shadow: inset 0 0 0 1px #fecdd3;
}

.aiof-confirmation__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	text-align: left;
}

.aiof-confirmation__card {
	padding: 26px 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-confirmation__card--invalid {
	max-width: 720px;
	margin: 0 auto;
	text-align: left;
}

.aiof-confirmation__card--invalid h2 {
	margin: 0 0 14px;
	font-size: 1.2rem;
}

.aiof-confirmation__reference {
	padding-bottom: 20px;
	border-bottom: 1px dashed var(--aiof-line-strong);
}

.aiof-confirmation__reference span {
	display: block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-confirmation__reference strong {
	display: block;
	margin: 6px 0 12px;
	font-family: var(--aiof-font);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--aiof-violet-strong);
	word-break: break-all;
}

.aiof-summary {
	margin: 0;
	padding: 6px 0 0;
}

.aiof-summary > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--aiof-line);
}

.aiof-summary > div:last-child {
	border-bottom: 0;
}

.aiof-summary dt {
	font-size: 0.86rem;
	color: var(--aiof-muted);
}

.aiof-summary dd {
	margin: 0;
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--aiof-heading);
	text-align: right;
}

.aiof-confirmation__save {
	display: flex;
	gap: 9px;
	margin: 20px 0 0;
	padding: 14px 15px;
	border-radius: var(--aiof-radius-sm);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	font-size: 0.86rem;
}

.aiof-confirmation__save .aiof-icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.aiof-confirmation__next {
	padding: 26px 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-confirmation__next h2 {
	margin: 0 0 18px;
	font-size: 1.2rem;
}

.aiof-next-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.aiof-next-steps li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.aiof-next-steps li span {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--aiof-line-strong);
	color: var(--aiof-violet);
	font-size: 0.78rem;
	font-weight: 800;
}

.aiof-next-steps strong {
	display: block;
	color: var(--aiof-heading);
	font-size: 0.97rem;
}

.aiof-next-steps p {
	margin: 3px 0 0;
	font-size: 0.88rem;
	color: var(--aiof-muted);
}

.aiof-confirmation__next .aiof-alert {
	margin-top: 20px;
}

.aiof-confirmation__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

.aiof-confirmation__actions .aiof-text-link {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
 * 13. About, instructor, contact, payment guide, legal, stories
 * ---------------------------------------------------------------------- */

/* 13.1 About page ------------------------------------------------------- */
.aiof-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.aiof-about__content > *:first-child {
	margin-top: 0;
}

.aiof-about__aside {
	display: grid;
	gap: 20px;
	position: sticky;
	top: calc(var(--aiof-header-height) + 22px);
}

.aiof-about__card {
	padding: 24px 22px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-about__card h2 {
	margin: 14px 0 12px;
	font-size: 1.12rem;
}

.aiof-about__card p {
	margin: 0 0 14px;
	font-size: 0.92rem;
}

.aiof-about__card-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet);
	box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.12);
}

.aiof-about__card--pay {
	background: var(--aiof-gradient-soft);
}

.aiof-about__card--pay .aiof-about__card-icon {
	background: #fff;
	color: var(--aiof-emerald);
	box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.16);
}

.aiof-about-values {
	background: var(--aiof-surface-2);
}

.aiof-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.aiof-about-values__item {
	padding: 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-sm);
	transition: transform 0.3s var(--aiof-ease), box-shadow 0.3s var(--aiof-ease);
}

.aiof-about-values__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--aiof-shadow);
}

.aiof-about-values__item > span {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 18px;
	background: var(--aiof-gradient-soft);
	color: var(--aiof-violet);
	box-shadow: inset 0 0 0 1px var(--aiof-line);
}

.aiof-about-values__item h3 {
	margin: 0 0 8px;
	font-size: 1.06rem;
}

.aiof-about-values__item p {
	margin: 0;
	font-size: 0.91rem;
	color: var(--aiof-muted);
}

.aiof-about-cta__box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	padding: 40px 42px;
	border-radius: var(--aiof-radius-xl);
	background: var(--aiof-gradient);
	color: #fff;
	box-shadow: var(--aiof-shadow-lg);
}

.aiof-about-cta__box > div:first-child {
	flex: 1 1 320px;
}

.aiof-about-cta__box h2 {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
}

.aiof-about-cta__box p {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.96rem;
}

.aiof-about-cta__box .aiof-actions {
	margin-left: auto;
}

.aiof-about-cta__box .aiof-button--primary {
	background: #fff;
	color: var(--aiof-violet-strong);
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
}

.aiof-about-cta__box .aiof-button--primary:hover {
	transform: translateY(-2px);
}

/* 13.2 Instructor profile hero ------------------------------------------ */
.aiof-profile-hero {
	padding-bottom: 62px;
}

.aiof-profile-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 48px;
	align-items: center;
}

.aiof-profile-hero__copy h1 {
	margin: 10px 0 8px;
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.65rem);
}

.aiof-profile-hero__role {
	margin: 0 0 14px;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--aiof-violet);
}

.aiof-profile-hero__bio {
	margin: 0 0 18px;
	max-width: 52ch;
	color: var(--aiof-body);
}

.aiof-profile-hero__copy .aiof-check-list {
	margin-bottom: 22px;
}

.aiof-profile-hero__visual {
	position: relative;
}

.aiof-profile-hero__frame {
	position: relative;
	padding: 18px;
	border-radius: var(--aiof-radius-xl);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg);
	transform: perspective(1200px) rotateY(-5deg) rotateX(2deg);
	transition: transform 0.5s var(--aiof-ease);
}

.aiof-profile-hero__frame:hover {
	transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.aiof-profile-hero__frame .aiof-mentor-portrait {
	min-height: 330px;
}

.aiof-profile-hero__badge {
	position: absolute;
	right: -10px;
	bottom: -18px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 264px;
	padding: 14px 18px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-profile-hero__badge .aiof-icon {
	flex: 0 0 auto;
	color: var(--aiof-emerald);
}

.aiof-profile-hero__badge strong {
	display: block;
	font-size: 0.92rem;
	color: var(--aiof-heading);
}

.aiof-profile-hero__badge span {
	display: block;
	font-size: 0.79rem;
	color: var(--aiof-muted);
}

.aiof-mentor-courses {
	background: var(--aiof-surface-2);
}

/* 13.3 Contact page ----------------------------------------------------- */
.aiof-contact-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 38px;
	align-items: start;
}

.aiof-contact-page__info h2 {
	margin: 8px 0 12px;
	font-size: 1.5rem;
}

.aiof-contact-page__info > p {
	margin: 0 0 24px;
	font-size: 0.96rem;
}

.aiof-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.aiof-contact-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-contact-list__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--aiof-surface-3);
	color: var(--aiof-violet);
}

.aiof-contact-list__icon--wa {
	background: #e7f9ef;
	color: var(--aiof-emerald);
}

.aiof-contact-list__icon--tg {
	background: #e8f2ff;
	color: var(--aiof-blue);
}

.aiof-contact-list li > div > span {
	display: block;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-contact-list li a,
.aiof-contact-list li strong {
	display: block;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--aiof-heading);
	text-decoration: none;
	word-break: break-word;
}

.aiof-contact-list li a:hover {
	color: var(--aiof-violet);
}

.aiof-contact-page__note {
	display: flex;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 18px;
	border-radius: var(--aiof-radius);
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #7c4a06;
}

.aiof-contact-page__note .aiof-icon {
	flex: 0 0 auto;
	color: var(--aiof-amber);
	margin-top: 2px;
}

.aiof-contact-page__note p {
	margin: 0;
	font-size: 0.87rem;
	color: #7c4a06;
}

.aiof-contact-form {
	padding: 4px 28px 28px;
}

.aiof-contact-form .aiof-checkbox {
	margin-top: 6px;
}

.aiof-contact-form .aiof-button {
	margin-top: 20px;
}

.aiof-form-card > .aiof-alert + .aiof-alert {
	margin-top: 12px;
}

/* 13.4 Payment guide ---------------------------------------------------- */
.aiof-payment-guide__intro {
	max-width: 760px;
	margin-bottom: 32px;
}

.aiof-payment-guide__number {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px;
	margin-bottom: 32px;
	padding: 30px 32px;
	border-radius: var(--aiof-radius-xl);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-payment-guide__number > div {
	flex: 1 1 320px;
}

.aiof-payment-guide__number span {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-payment-guide__number strong {
	display: block;
	margin: 6px 0 10px;
	font-family: var(--aiof-font);
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--aiof-heading);
}

.aiof-payment-guide__number p {
	margin: 0;
	max-width: 46ch;
	font-size: 0.9rem;
	color: var(--aiof-muted);
}

.aiof-payment-guide__number .aiof-payment-guide__intl {
	margin: 0 0 8px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--aiof-heading);
}

.aiof-payment-guide__number .aiof-payment-guide__intl bdi {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	color: var(--aiof-violet);
}

.aiof-payment-guide__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.aiof-payment-guide__card {
	position: relative;
	padding: 26px 24px 24px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
	overflow: hidden;
}

.aiof-payment-guide__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 5px;
	background: linear-gradient(90deg, var(--method-color, var(--aiof-violet)) 0%, var(--method-soft, var(--aiof-violet-soft)) 100%);
}

.aiof-payment-guide__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.aiof-payment-guide__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--method-color, var(--aiof-violet));
	box-shadow: 0 0 0 5px var(--method-soft, var(--aiof-violet-soft));
}

.aiof-payment-guide__head h2 {
	margin: 0;
	font-size: 1.16rem;
}

.aiof-payment-guide__tag {
	margin-left: auto;
	padding: 5px 12px;
	border-radius: var(--aiof-radius-pill);
	background: var(--method-soft, var(--aiof-violet-soft));
	color: var(--method-color, var(--aiof-violet));
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.aiof-payment-guide__card > p {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--aiof-body);
}

.aiof-payment-guide__steps {
	display: grid;
	gap: 8px;
	margin-bottom: 18px;
}

.aiof-payment-guide__steps span {
	display: block;
	padding: 10px 13px;
	border-radius: var(--aiof-radius-sm);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	font-size: 0.85rem;
	color: var(--aiof-body);
}

.aiof-payment-guide__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 32px;
	padding: 28px 30px;
	border-radius: var(--aiof-radius-xl);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-payment-guide__note > div {
	display: flex;
	gap: 16px;
	flex: 1 1 380px;
}

.aiof-payment-guide__note > div > .aiof-icon {
	flex: 0 0 auto;
	color: var(--aiof-emerald);
	margin-top: 3px;
}

.aiof-payment-guide__note h2 {
	margin: 0 0 8px;
	font-size: 1.16rem;
}

.aiof-payment-guide__note p {
	margin: 0;
	font-size: 0.91rem;
	color: var(--aiof-muted);
}

.aiof-payment-guide__note .aiof-button {
	margin-left: auto;
	flex: 0 0 auto;
}

.aiof-payment-guide__cta {
	margin-top: 32px;
	padding: 38px 32px;
	border-radius: var(--aiof-radius-xl);
	background: var(--aiof-gradient);
	color: #fff;
	text-align: center;
	box-shadow: var(--aiof-shadow-lg);
}

.aiof-payment-guide__cta h2 {
	margin: 0 0 10px;
	color: #fff;
}

.aiof-payment-guide__cta p {
	margin: 0 auto 22px;
	max-width: 62ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.96rem;
}

.aiof-payment-guide__cta .aiof-button {
	background: #fff;
	color: var(--aiof-violet-strong);
}

.aiof-payment-guide__cta .aiof-button:hover {
	transform: translateY(-2px);
}

/* 13.5 Legal pages ------------------------------------------------------ */
.aiof-legal__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: 40px;
	align-items: start;
}

.aiof-legal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-bottom: 26px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-legal__meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--aiof-muted);
}

.aiof-legal__meta .aiof-icon {
	color: var(--aiof-violet);
}

.aiof-legal__prose {
	max-width: 74ch;
}

.aiof-legal__contact {
	display: flex;
	gap: 16px;
	margin-top: 34px;
	padding: 24px 24px 22px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
}

.aiof-legal__contact-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: #fff;
	color: var(--aiof-violet);
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-legal__contact h2 {
	margin: 2px 0 8px;
	font-size: 1.08rem;
}

.aiof-legal__contact p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--aiof-body);
}

.aiof-legal__aside {
	display: grid;
	gap: 20px;
	position: sticky;
	top: calc(var(--aiof-header-height) + 22px);
}

.aiof-legal__nav {
	padding: 22px 20px;
	border-radius: var(--aiof-radius-lg);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
}

.aiof-legal__nav nav {
	margin-top: 12px;
}

.aiof-legal__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.aiof-legal__nav li a {
	display: block;
	padding: 10px 13px;
	border-radius: var(--aiof-radius-xs);
	color: var(--aiof-body);
	font-size: 0.91rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s var(--aiof-ease), color 0.2s var(--aiof-ease);
}

.aiof-legal__nav li a:hover {
	background: var(--aiof-surface-3);
	color: var(--aiof-violet-strong);
}

.aiof-legal__nav li.is-current a {
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	box-shadow: inset 0 0 0 1px rgba(109, 40, 217, 0.14);
}

.aiof-legal__aside-card {
	padding: 22px 20px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-legal__aside-card > span {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 14px;
	background: #fff;
	color: var(--aiof-emerald);
	box-shadow: inset 0 0 0 1px var(--aiof-line);
}

.aiof-legal__aside-card h2 {
	margin: 0 0 8px;
	font-size: 1rem;
}

.aiof-legal__aside-card p {
	margin: 0 0 14px;
	font-size: 0.88rem;
	color: var(--aiof-muted);
}

/* 13.6 Success stories -------------------------------------------------- */
.aiof-stories__note {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 840px;
	margin: 0 auto 36px;
	padding: 18px 22px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	text-align: left;
}

.aiof-stories__note .aiof-icon {
	flex: 0 0 auto;
	color: var(--aiof-emerald);
}

.aiof-stories__note p {
	margin: 0;
	font-size: 0.92rem;
	color: var(--aiof-body);
}

.aiof-empty--reviews,
.aiof-empty--blog,
.aiof-empty--search {
	max-width: 760px;
	margin: 0 auto;
}

.aiof-empty__quote {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--aiof-violet);
}

.aiof-empty__quote + .aiof-empty__ring {
	inset: -14px;
	border-style: dashed;
}

/* -------------------------------------------------------------------------
 * 14. Blog archive, article, comments, search, 404
 * ---------------------------------------------------------------------- */

/* 14.1 Search form ------------------------------------------------------ */
.aiof-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 16px;
	border-radius: var(--aiof-radius-pill);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-xs);
	transition: border-color 0.2s var(--aiof-ease), box-shadow 0.2s var(--aiof-ease);
}

.aiof-search-form:focus-within {
	border-color: #cbb6f5;
	box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.aiof-search-form__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	color: var(--aiof-muted);
}

.aiof-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--aiof-heading);
}

.aiof-search-form input[type="search"]:focus {
	outline: none;
}

.aiof-search-form .aiof-button {
	flex: 0 0 auto;
	padding: 11px 20px;
}

/* 14.2 Archive toolbar -------------------------------------------------- */
.aiof-blog-archive {
	padding-top: 44px;
}

.aiof-blog-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-bottom: 34px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-blog-toolbar__search {
	flex: 1 1 320px;
	max-width: 460px;
}

.aiof-blog-toolbar__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-left: auto;
}

.aiof-blog-toolbar > .aiof-text-link {
	margin-left: auto;
}

.aiof-blog__grid--archive {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aiof-search-results .aiof-blog-toolbar {
	margin-bottom: 30px;
}

.aiof-search-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

/* 14.3 Pagination ------------------------------------------------------- */
.aiof-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 44px;
}

.aiof-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--aiof-radius-sm);
	background: #fff;
	border: 1px solid var(--aiof-line);
	color: var(--aiof-heading);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.2s var(--aiof-ease), border-color 0.2s var(--aiof-ease), color 0.2s var(--aiof-ease);
}

.aiof-pagination a.page-numbers:hover {
	transform: translateY(-2px);
	border-color: #d3befa;
	color: var(--aiof-violet-strong);
}

.aiof-pagination .page-numbers.current {
	background: var(--aiof-gradient);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* 14.4 Single article --------------------------------------------------- */
.aiof-article-hero {
	position: relative;
	overflow: hidden;
	padding: 34px 0 46px;
	background: var(--aiof-gradient-soft);
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-article-hero__art {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.aiof-article-hero__wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 12% 0%, rgba(168, 85, 247, 0.14) 0%, transparent 70%);
}

.aiof-article-hero__orb {
	position: absolute;
	top: -90px;
	right: -60px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(217, 70, 239, 0.22) 0%, rgba(255, 255, 255, 0) 68%);
}

.aiof-article-hero__ring {
	position: absolute;
	right: 8%;
	bottom: -120px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	border: 1.5px dashed rgba(109, 40, 217, 0.26);
}

.aiof-article-hero .aiof-container {
	position: relative;
}

.aiof-article-hero .aiof-breadcrumb {
	margin-bottom: 20px;
}

.aiof-article-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-bottom: 16px;
}

.aiof-article-hero__meta > span,
.aiof-article-hero__category {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--aiof-muted);
}

.aiof-article-hero__category {
	padding: 6px 14px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-violet-soft);
	color: var(--aiof-violet-strong);
	text-decoration: none;
}

.aiof-article-hero h1 {
	margin: 0 0 16px;
	max-width: 20ch;
	font-size: clamp(1.85rem, 1.4rem + 2.2vw, 3rem);
	line-height: 1.14;
}

.aiof-article-hero__lead {
	margin: 0 0 22px;
	max-width: 70ch;
	font-size: 1.06rem;
	color: var(--aiof-body);
}

.aiof-article-hero__byline {
	display: flex;
	align-items: center;
	gap: 13px;
}

.aiof-article-hero__byline img {
	border-radius: 50%;
}

.aiof-article-hero__byline strong {
	display: block;
	font-size: 0.95rem;
	color: var(--aiof-heading);
}

.aiof-article-hero__byline span {
	display: block;
	font-size: 0.82rem;
	color: var(--aiof-muted);
}

.aiof-article-cover {
	margin: -34px auto 0;
	max-width: 1000px;
	border-radius: var(--aiof-radius-lg);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg);
}

.aiof-article-cover img {
	display: block;
	width: 100%;
	height: auto;
}

.aiof-article-body {
	padding-top: 46px;
}

.aiof-article-body .aiof-prose {
	max-width: 74ch;
}

.aiof-article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px dashed var(--aiof-line-strong);
}

.aiof-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
	padding: 18px 20px;
	border-radius: var(--aiof-radius);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-share__label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--aiof-heading);
}

.aiof-share__label .aiof-icon {
	color: var(--aiof-violet);
}

.aiof-share__links {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.aiof-share__link {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--aiof-violet-strong);
	box-shadow: inset 0 0 0 1px var(--aiof-line-strong);
	cursor: pointer;
	transition: transform 0.2s var(--aiof-ease), background 0.2s var(--aiof-ease), color 0.2s var(--aiof-ease);
}

.aiof-share__link:hover {
	transform: translateY(-3px);
	color: #fff;
}

.aiof-share__link--whatsapp:hover {
	background: #16a34a;
}

.aiof-share__link--facebook:hover {
	background: #2563eb;
}

.aiof-share__link--telegram:hover {
	background: #0284c7;
}

.aiof-share__link--copy:hover,
.aiof-share__link--copy.is-copied {
	background: var(--aiof-violet);
}

.aiof-author-card {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 30px;
	padding: 24px 26px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-gradient-soft);
	border: 1px solid var(--aiof-line);
}

.aiof-author-card img {
	flex: 0 0 auto;
	border-radius: 50%;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-author-card h2 {
	margin: 4px 0 6px;
	font-size: 1.12rem;
}

.aiof-author-card p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--aiof-body);
}

.aiof-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 30px;
}

.aiof-post-nav__item {
	display: block;
	padding: 20px 22px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-xs);
	text-decoration: none;
	transition: transform 0.2s var(--aiof-ease), box-shadow 0.2s var(--aiof-ease), border-color 0.2s var(--aiof-ease);
}

.aiof-post-nav__item:hover {
	transform: translateY(-3px);
	border-color: #d3befa;
	box-shadow: var(--aiof-shadow);
}

.aiof-post-nav__item span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aiof-muted);
}

.aiof-post-nav__item strong {
	display: block;
	margin-top: 8px;
	font-size: 1rem;
	color: var(--aiof-heading);
	line-height: 1.4;
}

.aiof-post-nav__item--next {
	text-align: right;
}

.aiof-post-nav__item--next span {
	justify-content: flex-end;
}

.aiof-related--blog {
	background: var(--aiof-surface-2);
}

/* 14.5 Comments --------------------------------------------------------- */
.aiof-comments {
	margin-top: 46px;
	padding-top: 34px;
	border-top: 1px solid var(--aiof-line);
}

.aiof-comments__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 26px;
}

.aiof-comments__head h2 {
	margin: 0;
	font-size: 1.3rem;
}

.aiof-comments__nav {
	display: flex;
	gap: 10px;
	font-size: 0.88rem;
}

.aiof-comments__nav--bottom {
	justify-content: center;
	margin-top: 26px;
}

.aiof-comments__list,
.aiof-comments__list .children {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.aiof-comments__list .children {
	margin-top: 18px;
	padding-left: 26px;
	border-left: 2px solid var(--aiof-line);
}

.aiof-comment__inner {
	display: flex;
	gap: 16px;
	padding: 20px 22px;
	border-radius: var(--aiof-radius);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-xs);
}

.aiof-comment__avatar {
	flex: 0 0 auto;
}

.aiof-comment__avatar img {
	border-radius: 50%;
}

.aiof-comment__body {
	flex: 1 1 auto;
	min-width: 0;
}

.aiof-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.aiof-comment__meta strong {
	font-size: 0.97rem;
	color: var(--aiof-heading);
}

.aiof-comment__meta span {
	font-size: 0.8rem;
	color: var(--aiof-muted);
}

.aiof-comment__pending {
	padding: 4px 11px;
	border-radius: var(--aiof-radius-pill);
	background: #fffbeb;
	color: #92580a;
	font-size: 0.74rem;
	font-style: normal;
	font-weight: 700;
}

.aiof-comment__text p {
	margin: 0 0 10px;
	font-size: 0.94rem;
}

.aiof-comment__text p:last-child {
	margin-bottom: 0;
}

.aiof-comment__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 10px;
}

.aiof-comment__actions a {
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--aiof-violet);
	text-decoration: none;
}

.aiof-comment__actions a:hover {
	text-decoration: underline;
}

.aiof-comments__closed {
	margin: 26px 0 0;
	padding: 16px 18px;
	border-radius: var(--aiof-radius-sm);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
	font-size: 0.9rem;
	color: var(--aiof-muted);
}

.aiof-comments #respond,
.aiof-comments .comment-respond {
	margin-top: 34px;
	padding: 26px 26px 24px;
	border-radius: var(--aiof-radius-lg);
	background: var(--aiof-surface-2);
	border: 1px solid var(--aiof-line);
}

.aiof-comment-form__title {
	margin: 0 0 8px;
	font-size: 1.14rem;
}

.aiof-comment-form__notes {
	margin: 0 0 18px;
	font-size: 0.86rem;
	color: var(--aiof-muted);
}

.aiof-field--comment textarea {
	min-height: 130px;
}

.aiof-comments .form-submit {
	margin: 20px 0 0;
}

.aiof-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 8px 0 0;
}

.aiof-comments .comment-form-cookies-consent label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.87rem;
	color: var(--aiof-body);
	line-height: 1.5;
}

/* 14.6 404 -------------------------------------------------------------- */
.aiof-404 {
	position: relative;
	overflow: hidden;
	padding: 72px 0 90px;
	background: var(--aiof-gradient-soft);
}

.aiof-404__art {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.aiof-404__wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 70% at 80% 10%, rgba(168, 85, 247, 0.14) 0%, transparent 70%);
}

.aiof-404__orb {
	position: absolute;
	border-radius: 50%;
}

.aiof-404__orb--one {
	top: -70px;
	left: -40px;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle at 40% 35%, rgba(124, 58, 237, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
}

.aiof-404__orb--two {
	right: 6%;
	bottom: -90px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle at 45% 40%, rgba(217, 70, 239, 0.18) 0%, rgba(255, 255, 255, 0) 70%);
}

.aiof-404__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(109, 40, 217, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 40, 217, 0.06) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 85%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 85%);
}

.aiof-404 .aiof-container {
	position: relative;
}

.aiof-404__grid-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 48px;
	align-items: center;
}

.aiof-404__copy h1 {
	margin: 12px 0 14px;
	font-size: clamp(1.8rem, 1.4rem + 2vw, 2.7rem);
	line-height: 1.16;
}

.aiof-404__text {
	margin: 0 0 24px;
	max-width: 54ch;
	color: var(--aiof-body);
}

.aiof-404__search {
	max-width: 460px;
	margin-bottom: 26px;
}

.aiof-404__links {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px dashed var(--aiof-line-strong);
}

.aiof-404__links h2 {
	margin: 0 0 14px;
	font-size: 0.98rem;
}

.aiof-404__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 18px 10px 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--aiof-violet);
	text-decoration: none;
}

.aiof-404__links a:hover {
	color: var(--aiof-violet-strong);
	text-decoration: underline;
}

.aiof-404__card {
	position: relative;
	padding: 26px 26px 30px;
	border-radius: var(--aiof-radius-xl);
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow-lg);
	transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
}

.aiof-404__card-top {
	display: flex;
	align-items: center;
	gap: 7px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--aiof-line);
}

.aiof-404__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #e9d5ff;
}

.aiof-404__dot:nth-child(2) {
	background: #bfdbfe;
}

.aiof-404__dot:nth-child(3) {
	background: #bbf7d0;
}

.aiof-404__pill {
	margin-left: auto;
	padding: 5px 13px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-surface-3);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--aiof-muted);
}

.aiof-404__code {
	margin: 22px 0;
	font-family: var(--aiof-font);
	font-size: clamp(3.4rem, 2rem + 6vw, 5.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--aiof-heading);
}

.aiof-404__code span {
	background: var(--aiof-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.aiof-404__card-lines {
	display: grid;
	gap: 10px;
}

.aiof-404__card-lines span {
	display: block;
	height: 11px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-surface-3);
}

.aiof-404__card-lines span:nth-child(1) {
	width: 100%;
}

.aiof-404__card-lines span:nth-child(2) {
	width: 78%;
}

.aiof-404__card-lines span:nth-child(3) {
	width: 56%;
}

.aiof-404__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	padding: 13px 22px;
	border-radius: var(--aiof-radius-pill);
	background: var(--aiof-gradient);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	box-shadow: var(--aiof-shadow-sm);
}

.aiof-404__float {
	position: absolute;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--aiof-line);
	box-shadow: var(--aiof-shadow);
	color: var(--aiof-violet);
	animation: aiof-bob 6s ease-in-out infinite;
}

.aiof-404__float--one {
	top: -22px;
	left: -18px;
}

.aiof-404__float--two {
	right: -16px;
	bottom: 44px;
	animation-delay: 1.4s;
	color: var(--aiof-fuchsia);
}

/* 14.7 Generic page content -------------------------------------------- */
.aiof-page-content {
	padding-top: 54px;
}

.aiof-page-content .aiof-prose--page {
	max-width: 74ch;
	margin: 0 auto;
}

.aiof-page-content .aiof-edit-link {
	margin-top: 22px;
	font-size: 0.84rem;
	color: var(--aiof-muted);
}

/* -------------------------------------------------------------------------
 * 15. Responsive
 * ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
	.aiof-why__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.aiof-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 1160px) {
	.aiof-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}

	.aiof-blog__grid--archive,
	.aiof-search-grid,
	.aiof-course-grid--three,
	.aiof-blog__grid--three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aiof-slider__slide {
		flex: 0 0 calc((100% - 20px) / 2);
	}
}

@media (max-width: 1080px) {
	.aiof-hero__grid,
	.aiof-course-hero__grid,
	.aiof-benefits__grid,
	.aiof-mentor__grid,
	.aiof-faq__grid,
	.aiof-about__grid,
	.aiof-profile-hero__grid,
	.aiof-contact-page__grid,
	.aiof-404__grid-layout,
	.aiof-confirmation__grid,
	.aiof-course-layout,
	.aiof-legal__layout,
	.aiof-enroll__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiof-about__aside,
	.aiof-legal__aside,
	.aiof-enroll__aside,
	.aiof-course-sidebar {
		position: static;
		top: auto;
	}

	.aiof-payment-guide__grid,
	.aiof-about-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aiof-hero-stage {
		max-width: 640px;
		margin: 0 auto;
	}

	.aiof-hero-player {
		max-width: 680px;
		margin: 0 auto;
	}

	.aiof-profile-hero__frame,
	.aiof-404__card {
		transform: none;
	}

	.aiof-profile-hero__visual {
		max-width: 520px;
		margin: 0 auto 30px;
	}

	.aiof-profile-hero__badge {
		right: 8px;
		bottom: -14px;
	}

	.aiof-legal__nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.aiof-legal__aside-card {
		margin-top: 4px;
	}

	.aiof-confirmation__grid {
		gap: 22px;
	}

	.aiof-confirmation__actions .aiof-text-link {
		margin-left: 0;
	}

	.aiof-catalogue__help {
		flex-wrap: wrap;
	}

	.aiof-catalogue__help .aiof-button {
		margin-left: 0;
	}
}

@media (max-width: 900px) {
	:root {
		--aiof-header-height: 68px;
	}

	.aiof-featured__grid,
	.aiof-cta {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiof-header__desktop-nav {
		display: none;
	}

	.aiof-nav-toggle {
		display: inline-flex;
	}

	.aiof-header__actions {
		margin-left: auto;
		gap: 8px;
	}

	.aiof-mobile-menu:not([hidden]) {
		display: block;
	}

	.aiof-header__cta {
		padding: 10px 15px;
		font-size: 0.88rem;
	}

	.aiof-section {
		padding-top: 62px;
		padding-bottom: 62px;
	}

	.aiof-hero {
		padding-top: 46px;
		padding-bottom: 56px;
	}

	.aiof-benefits__grid,
	.aiof-mentor__grid,
	.aiof-faq__grid,
	.aiof-about__grid,
	.aiof-contact-page__grid {
		gap: 30px;
	}

	.aiof-hero-player__caption {
		gap: 10px;
		padding: 11px 14px;
	}

	.aiof-mentor__visual {
		width: 100%;
		max-width: 460px;
		margin: 0 auto;
	}

	.aiof-enroll__aside {
		order: 2;
	}

	.aiof-enroll__main {
		order: 1;
	}

	.aiof-enroll-help {
		flex-wrap: wrap;
	}

	.aiof-enroll-help .aiof-button {
		margin-left: 0;
	}

	.aiof-payment-guide__number,
	.aiof-payment-guide__note,
	.aiof-about-cta__box {
		padding: 26px 24px;
	}

	.aiof-payment-guide__note .aiof-button {
		margin-left: 0;
	}

	.aiof-blog-toolbar__cats {
		margin-left: 0;
		width: 100%;
	}

	.aiof-404__card {
		max-width: 460px;
		margin: 0 auto;
	}

	.aiof-article-hero h1 {
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	.aiof-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiof-mentor__card {
		left: 14px;
		right: 14px;
		bottom: 14px;
	}

	.aiof-mentor__card > div {
		min-width: 0;
	}

	.aiof-mentor__card strong,
	.aiof-mentor__card span {
		overflow-wrap: anywhere;
	}

	.aiof-blog__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.aiof-benefits__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiof-step::before {
		display: none;
	}

	.aiof-course-grid,
	.aiof-course-grid--three,
	.aiof-blog__grid,
	.aiof-blog__grid--three,
	.aiof-blog__grid--archive,
	.aiof-search-grid,
	.aiof-payment-guide__grid,
	.aiof-about-values__grid,
	.aiof-form-grid,
	.aiof-method-grid,
	.aiof-post-nav,
	.aiof-steps__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiof-slider__slide {
		flex: 0 0 100%;
	}

	.aiof-slider__head {
		align-items: flex-start;
	}

	.aiof-post-nav__item--next {
		text-align: left;
	}

	.aiof-post-nav__item--next span {
		justify-content: flex-start;
	}

	.aiof-share__links {
		margin-left: 0;
	}

	.aiof-author-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.aiof-article-cover {
		margin-top: -20px;
		border-radius: var(--aiof-radius);
	}

	.aiof-article-hero {
		padding: 24px 0 40px;
	}

	.aiof-article-body {
		padding-top: 34px;
	}

	.aiof-form-card__head {
		padding: 22px 20px 18px;
	}

	.aiof-form-card > .aiof-alert {
		margin: 18px 20px 0;
	}

	.aiof-enroll-form,
	.aiof-contact-form {
		padding: 4px 20px 22px;
	}

	.aiof-form-section--confirm {
		padding: 20px 16px;
	}

	.aiof-payment-panel,
	.aiof-confirmation__card,
	.aiof-confirmation__next,
	.aiof-about__card {
		padding: 22px 18px;
	}

	.aiof-summary > div {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}

	.aiof-summary dd {
		text-align: left;
	}

	.aiof-confirmation__actions {
		gap: 12px;
	}

	.aiof-confirmation__actions .aiof-button {
		width: 100%;
		justify-content: center;
	}

	.aiof-amount-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.aiof-comments #respond,
	.aiof-comments .comment-respond {
		padding: 20px 18px;
	}

	.aiof-comments__list .children {
		padding-left: 14px;
	}

	.aiof-comment__inner {
		padding: 16px 16px;
	}

	.aiof-404 {
		padding: 52px 0 66px;
	}

	.aiof-404__float--one {
		top: -14px;
		left: -8px;
	}

	.aiof-404__float--two {
		right: -8px;
	}

	.aiof-hero-player__caption {
		flex-wrap: wrap;
		font-size: 0.88rem;
	}

	.aiof-hero-player__badge {
		display: none;
	}

	.aiof-hero-player.is-mini {
		left: 12px;
		right: 12px;
		bottom: 76px;
		width: auto;
	}

	.aiof-announcement__inner {
		flex-wrap: wrap;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.aiof-announcement__link {
		margin-left: 0;
	}

	.aiof-legal__contact {
		padding: 20px 18px;
	}

	.aiof-faq__help,
	.aiof-reviews__footer {
		flex-wrap: wrap;
	}

	.aiof-reviews__footer .aiof-button,
	.aiof-faq__help .aiof-button {
		margin-left: 0;
	}
}

@media (max-width: 560px) {
	:root {
		--aiof-gutter: 18px;
		--aiof-radius-lg: 22px;
		--aiof-radius-xl: 26px;
	}

	.aiof-hero-player {
		padding: 9px;
	}

	.aiof-hero-player__play-icon {
		width: 62px;
		height: 62px;
	}

	.aiof-icon-button,
	.aiof-nav-toggle {
		width: 40px;
		height: 40px;
	}

	.aiof-header__cta {
		padding: 9px 13px;
		font-size: 0.84rem;
	}

	.aiof-brand__name {
		font-size: 1.02rem;
	}

	.aiof-whatsapp-float {
		right: 14px;
		bottom: 14px;
		padding: 14px;
	}

	.aiof-whatsapp-float span {
		display: none;
	}

	.aiof-section {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.aiof-featured__art {
		transform: none;
	}

	.aiof-featured__float {
		left: 14px;
	}

	.aiof-featured__meta {
		grid-template-columns: minmax(0, 1fr);
	}

	.aiof-cta {
		padding: 26px 20px;
	}

	.aiof-cta__panel {
		padding: 20px 18px;
	}

	.aiof-cta__panel li a[href^="mailto:"] {
		font-size: 0.85rem;
	}

	.aiof-cta__actions .aiof-button {
		width: 100%;
		justify-content: center;
	}

	.aiof-about-cta__box,
	.aiof-payment-guide__cta,
	.aiof-payment-guide__number,
	.aiof-payment-guide__note {
		padding: 24px 18px;
	}

	.aiof-about-cta__box .aiof-actions,
	.aiof-payment-guide__note .aiof-button,
	.aiof-about-cta__box .aiof-button {
		width: 100%;
		margin-left: 0;
	}

	.aiof-about-cta__box .aiof-button {
		justify-content: center;
	}

	.aiof-payment-number strong,
	.aiof-confirmation__reference strong {
		font-size: 1.4rem;
	}

	.aiof-legal__meta {
		gap: 8px 14px;
	}

	.aiof-pagination .page-numbers {
		min-width: 40px;
		height: 40px;
	}

	.aiof-article-hero__meta {
		gap: 8px 14px;
	}

	.aiof-share {
		padding: 16px 14px;
	}

	.aiof-search-form {
		flex-wrap: wrap;
		padding: 10px 12px;
		border-radius: var(--aiof-radius);
	}

	.aiof-search-form input[type="search"] {
		padding: 6px 2px;
	}

	.aiof-search-form .aiof-button {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.aiof-header__bar {
		gap: 10px;
	}

	.aiof-header__brand {
		min-width: 0;
	}

	.aiof-header__actions {
		gap: 8px;
	}

	.aiof-header__actions .aiof-icon-button--telegram {
		display: none;
	}

	.aiof-header__brand .aiof-brand__text {
		display: none;
	}

	.aiof-header__brand .aiof-brand__mark {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.aiof-header__brand .aiof-brand__mark svg {
		width: 28px;
		height: 28px;
	}

	.aiof-header__brand .aiof-brand__img {
		max-width: 96px;
		max-height: 40px;
		object-fit: contain;
	}

	.aiof-header__cta {
		padding: 9px 11px;
	}

	.aiof-form-section__title span {
		width: 28px;
		height: 28px;
	}

	.aiof-next-steps li span,
	.aiof-enroll-steps li span {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 340px) {
	.aiof-header__bar {
		gap: 8px;
	}

	.aiof-header__actions {
		gap: 6px;
	}

	.aiof-header__brand .aiof-brand__img {
		max-width: 72px;
	}

	.aiof-header__cta {
		padding: 8px 9px;
		font-size: 0.8rem;
	}
}

body.aiof-nav-open {
	overflow: hidden;
}

@keyframes aiof-bob {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-9px);
	}
}

/* -------------------------------------------------------------------------
 * 16. Motion and print
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.aiof-js .reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.aiof-hero-stage__frame,
	.aiof-profile-hero__frame,
	.aiof-404__card,
	.aiof-post-card:hover,
	.aiof-course-card:hover,
	.aiof-about-values__item:hover {
		transform: none !important;
	}

	.aiof-slider__track {
		transition: none !important;
	}
}

@media print {
	.aiof-header,
	.aiof-footer,
	.aiof-announcement,
	.aiof-whatsapp-float,
	.aiof-hero-player.is-mini,
	.aiof-nav-toggle,
	.aiof-share,
	.aiof-post-nav,
	.aiof-related,
	.aiof-comments,
	.aiof-copy-button,
	.aiof-edit-link,
	.aiof-breadcrumb,
	.aiof-confirmation__actions .aiof-button,
	.aiof-empty__art,
	.aiof-404__visual {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000;
		font-size: 12pt;
	}

	.aiof-main {
		display: block;
	}

	.aiof-section,
	.aiof-404,
	.aiof-article-hero {
		padding: 0 0 18pt;
		background: none !important;
	}

	.aiof-confirmation__hero {
		margin-bottom: 16pt;
	}

	.aiof-confirmation__hero h1 {
		font-size: 18pt;
	}

	.aiof-confirmation__icon,
	.aiof-status {
		box-shadow: none;
		border: 1pt solid #999;
		background: none !important;
		color: #000 !important;
	}

	.aiof-confirmation__grid {
		display: block;
	}

	.aiof-confirmation__card,
	.aiof-confirmation__next,
	.aiof-summary,
	.aiof-post-card,
	.aiof-form-card {
		box-shadow: none !important;
		border: 1pt solid #ccc;
		break-inside: avoid;
	}

	.aiof-confirmation__next {
		margin-top: 14pt;
	}

	.aiof-summary > div {
		border-bottom: 1pt dotted #ccc;
	}

	.aiof-prose a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #555;
		word-break: break-all;
	}

	.aiof-text-link,
	.aiof-button {
		color: #000 !important;
		text-decoration: none;
	}
}

/* -------------------------------------------------------------------------
 * 17. JavaScript states
 * ---------------------------------------------------------------------- */
.aiof-slider__viewport:focus-visible {
	outline: 3px solid rgba(124, 58, 237, 0.35);
	outline-offset: 8px;
	border-radius: var(--aiof-radius-lg);
}

.aiof-button.is-loading,
.aiof-button[aria-busy="true"] {
	opacity: 0.72;
	cursor: progress;
	pointer-events: none;
}

.aiof-copy-button.is-copied {
	border-color: rgba(5, 150, 105, 0.4);
	color: var(--aiof-emerald);
}

.aiof-yt iframe {
	border: 0;
}

.aiof-form-card .aiof-alert:focus-visible {
	outline: 3px solid rgba(190, 18, 60, 0.28);
	outline-offset: 4px;
}

/* End of AllinOne Freelancing stylesheet. */