/* =========================================================================
   Hooshino — Design System & Site Styles
   Pixel values extracted 1:1 from the Figma source (.fig).
   RTL-first. Single file, no imports, no frameworks.
   ========================================================================= */

/* -------------------------------------------------- 1. Design tokens */
:root {
	/* Typeface: PeydaWeb is injected by PHP when licensed files exist. */
	--font-base: PeydaWeb, Tahoma, Arial, sans-serif;

	/* Brand (Mauve ramp) */
	--brand-50: #fbf5ff;
	--brand-100: #f5e9fe;
	--brand-200: #edd6fe;
	--brand-key: #dfb6fc;
	--brand-400: #cb87f9;
	--brand-500: #b759f3;
	--brand-600: #a438e5;
	--brand-700: #8e27c9;

	/* Ink (bigStone / victoria) */
	--ink: #222359;
	--ink-strong: #272744;
	--ink-soft: #3b3c6d;

	/* Neutrals (mineShaft / brightens) */
	--text-600: #575d63;
	--text-500: #656d75;
	/* design token mineShaft-400 (#81898f) fails WCAG AA on white at small sizes;
	   one step down the same ramp (mineShaft-500) keeps the look and passes 4.5:1 */
	--text-400: #656d75;
	--line-100: #e5e7e8;
	--line-150: #e5e5e5;
	--line-200: #cdd1d4;
	--bg: #f7f7f7;
	--surface: #fafafa;
	--white: #ffffff;

	/* Section panels */
	--panel-pricing: #e4e7f5;
	--panel-gray: #ededed;
	--panel-tile: #e8e8e8;
	--chip-bg: #f1f3fd;

	/* Status */
	--error: #ff2d55;
	--badge-new: #4f68e2;
	--dot: #8998d1;
	--dot-core: #f3f5fb;

	/* Radii scale (Anatomy tokens) */
	--r-6: 6px;  --r-8: 8px;  --r-10: 10px; --r-12: 12px;
	--r-16: 16px; --r-24: 24px; --r-28: 28px; --r-32: 32px; --r-40: 40px;

	/* Shadows (from Figma effects) */
	--shadow-btn: 0 1px 1px rgba(0, 0, 0, .09), 0 1px 1px rgba(0, 0, 0, .05), 0 2px 1px rgba(0, 0, 0, .01);
	--shadow-search: 0 3px 8px rgba(0, 0, 0, .08);
	--shadow-chipbtn: 0 1px 2px rgba(0, 0, 0, .12);
	--shadow-card: 0 16px 24px rgba(233, 233, 233, .08), 0 4px 8px -4px rgba(22, 34, 51, .08);
	--shadow-stats: 0 8px 16px -4px rgba(22, 34, 51, .08);
	--shadow-toggle: 0 1px 2px rgba(0, 0, 0, .2);

	/* Layout */
	--container: 1308px;
	--container-header: 1242px;
	--gutter: 24px;
	--section-gap: 48px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	/* Decorative full-bleed elements (analysis ghost cards, hero tiles) must
	   never widen the document and shift the layout on small screens. */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink);
	background: var(--bg);
	direction: rtl;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink-strong); line-height: 1.45; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; }

:focus-visible {
	outline: 2px solid var(--brand-500);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--brand-200); color: var(--ink); }

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

.skip-link {
	position: absolute;
	inset-inline-start: 8px;
	top: -48px;
	z-index: 100;
	padding: 10px 18px;
	background: var(--ink);
	color: var(--white);
	border-radius: 0 0 var(--r-8) var(--r-8);
	transition: top .2s;
}
.skip-link:focus { top: 0; width: auto; height: auto; clip-path: none; margin: 0; }

/* -------------------------------------------------- 3. Layout utilities */
.container-wide {
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container-header {
	/* content area inside the 1242px curved shape (91px inset each side in the design) */
	max-width: 1108px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container-narrow {
	max-width: 872px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section-title {
	font-size: 24px;
	line-height: 38px;
	font-weight: 700;
	color: var(--ink-strong);
	text-align: center;
}
.section-title strong,
.features__title strong { font-weight: 900; }

.section-sub {
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-500);
	text-align: center;
}

/* -------------------------------------------------- 4. Chip badge  (42h / r32) */
.chip { display: flex; justify-content: center; margin: 0; }

.chip__inner {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 24px;
	min-height: 42px;
	background: var(--chip-bg);
	border: 1px solid var(--line-200);
	border-radius: 32px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--ink);
}

.chip__icon { display: inline-flex; color: var(--ink); }
.chip__icon .icon { width: 20px; height: 20px; }

/* -------------------------------------------------- 5. Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	border-radius: var(--r-10);
	padding: 8px 16px;
	min-height: 40px;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
	will-change: transform;
}

.btn--md { min-height: 48px; padding: 8px 24px; border-radius: var(--r-12); }
.btn--lg { min-height: 56px; padding: 8px 24px; border-radius: var(--r-12); font-size: 16px; }

.btn--primary {
	/* design token is brand-500 (#b759f3), but white text on it is 3.7:1 —
	   one step down the same ramp passes WCAG AA (4.9:1) at minimal visual cost */
	background: var(--brand-600);
	color: var(--white);
	box-shadow: var(--shadow-btn);
}
.btn--primary:hover { background: var(--brand-700); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }

.btn--secondary {
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line-100);
}
.btn--secondary:hover { border-color: var(--line-200); background: var(--surface); }
.btn--secondary:active { transform: translateY(1px); }

.btn__icon { transition: transform .18s ease; }
.btn:hover .btn__icon { transform: translateX(-3px); }

/* -------------------------------------------------- 6. Header  (86h, curved shape) */
.site-header {
	position: relative;
	z-index: 20;
}

/* The whole header bar IS the curved vector shape from the design. */
.site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1242px, 100%);
	height: 100%;
	background: url("../img/header-curve.svg") top center / 100% 100% no-repeat;
	pointer-events: none;
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 86px;
	padding-block: 11px 20px;
}

.site-brand__link { display: inline-flex; align-items: center; gap: 10px; }
.site-brand__name img { width: 102px; height: auto; }

.site-header__rule {
	flex: 1 1 0;
	height: 1px;
	background: linear-gradient(270deg, #ffffff 0%, var(--line-150) 100%);
}
.site-header__rule + .site-nav + .site-header__rule,
.site-header__mark ~ .site-header__rule {
	background: linear-gradient(90deg, #ffffff 0%, var(--line-150) 100%);
}

.site-header__mark img { width: 32px; height: 32px; }

.site-nav__list { display: flex; align-items: center; gap: 28px; }
.site-nav__list a {
	font-size: 15px;
	color: var(--ink);
	padding: 6px 2px;
	border-radius: 6px;
	transition: color .15s;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a { color: var(--brand-600); }

.site-header__toggle { display: none; color: var(--ink); padding: 8px; }
.site-header__toggle .icon--close { display: none; }
.site-header__toggle[aria-expanded="true"] .icon--open { display: none; }
.site-header__toggle[aria-expanded="true"] .icon--close { display: block; }

.site-header__curve { display: none; }

@media (max-width: 1024px) {
	.site-header::before { display: none; }
	.site-header {
		background: linear-gradient(180deg, var(--surface), var(--white));
		border-bottom: 1px solid var(--line-150);
		border-radius: 0 0 var(--r-24) var(--r-24);
		/* Sticky header on mobile/tablet. */
		position: sticky;
		top: 0;
		z-index: 40;
	}
	.site-header__inner { padding-block: 11px; }
	/* Stacked pricing: free (featured) plan first, then the paid plans. */
	.pricing__panel > .plan--featured { order: -1; }
}

/* -------------------------------------------------- 7. Hero  (panel 522h, r32) */
.hero { padding-top: 3px; }

.hero__panel {
	position: relative;
	display: grid;
	/* RTL grid: first column sits at the right — content right, brain left (as designed). */
	grid-template-columns: minmax(0, 612px) minmax(0, 486px);
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	min-height: 522px;
	padding: 40px 32px;
	border-radius: var(--r-32);
	overflow: hidden;
	/* faint 48px grid, fading toward edges (Figma tile grid @5% #01030b) */
	background-image:
		radial-gradient(120% 90% at 50% 40%, rgba(247, 247, 247, 0) 55%, var(--bg) 100%),
		linear-gradient(0deg, rgba(1, 3, 11, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(1, 3, 11, .045) 1px, transparent 1px);
	background-size: auto, 48px 48px, 48px 48px;
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.hero__content .chip { justify-content: flex-start; }

.hero__title {
	font-size: 28px;
	line-height: 44px;
	font-weight: 700;
	color: var(--ink-strong);
	max-width: 612px;
}
.hero__title strong { font-weight: 900; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__desc {
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-600);
	max-width: 612px;
}

.hero__media {
	position: relative;
	width: min(422px, 100%);
	aspect-ratio: 422 / 442;
	justify-self: end; /* hugs the left edge of the panel in RTL */
}

.hero__brain {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
}

.hero__tile {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--surface);
	border-radius: var(--r-8);
	box-shadow: -8px -8px 32px rgba(255, 255, 255, .2), 8px 8px 32px rgba(174, 174, 192, .2);
	animation: hero-float 6s ease-in-out infinite;
}
.hero__tile img { width: 36px; height: 36px; }

/* Figma coordinates (LTR canvas, 422x442 box) expressed as percentages so
   the composition scales with the media box instead of overflowing it on
   small screens: left = x/422, top = y/442. */
.hero__tile--openai   { top: 0;      left: 44.08%; animation-delay: 0s; }
.hero__tile--grok     { top: 16.29%; left: 0;      animation-delay: -1.2s; }
.hero__tile--star     { top: 16.06%; right: 0;     animation-delay: -2.4s; }
.hero__tile--whale    { top: 72.85%; left: 0;      animation-delay: -3.2s; }
.hero__tile--snow     { top: 72.85%; right: 0;     animation-delay: -4.1s; }
.hero__tile--deepseek { top: 89.14%; left: 44.08%; animation-delay: -5s; }

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

/* -------------------------------------------------- 8. Search section (panel 722h) */
.search-section { margin-top: var(--section-gap); }

.search-section__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding-block: 32px;
	border-radius: var(--r-32);
}

.search-section__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 661px;
}
.search-section__head .section-sub { margin-top: -4px; }

.search-bar {
	position: relative;
	width: min(661px, 100%);
	background: var(--white);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--r-12);
	box-shadow: var(--shadow-search);
	min-height: 56px;
	display: flex;
	align-items: center;
}

.search-bar__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 16px 16px 16px 120px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
}
.search-bar__input::placeholder { color: var(--text-500); }
.search-bar__input:focus { outline: none; }
.search-bar:focus-within { box-shadow: var(--shadow-search), 0 0 0 2px var(--brand-200); }

.search-bar__btn {
	position: absolute;
	inset-inline-end: auto;
	left: 8px;
	top: 8px;
	bottom: 8px;
	min-height: 40px;
	border-radius: var(--r-8);
	padding: 8px 16px;
}

/* Filter chips (36h / r6) */
.search-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 12px;
	background: var(--surface);
	border: 2px solid var(--bg);
	border-radius: var(--r-6);
	box-shadow: var(--shadow-chipbtn);
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-strong);
	transition: transform .15s ease, box-shadow .15s ease;
}
.filter-chip:hover { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(0, 0, 0, .14); }

.filter-chip__count {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 12px;
	font-weight: 500;
	background: var(--line-100);
	border-radius: var(--r-6);
	box-shadow: inset 0 -1px 2.5px rgba(0, 0, 0, .04);
}

.filter-chip--active,
.filter-chip[aria-pressed="true"] {
	background: linear-gradient(135deg, #272744 0%, #3b3c6d 100%);
	border-color: transparent;
	color: var(--white);
	padding-inline: 16px;
}
.filter-chip--active .filter-chip__count,
.filter-chip[aria-pressed="true"] .filter-chip__count {
	background: rgba(255, 255, 255, .18);
	color: var(--white);
	box-shadow: none;
}

/* Media strip (holder r24 / cards 230x320 r16) */
.media-strip {
	width: 100%;
	background: var(--panel-tile);
	border-radius: var(--r-24);
	padding: 20px;
}

.media-strip__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.media-strip__track::-webkit-scrollbar { display: none; }

.media-card {
	position: relative;
	flex: 0 0 230px;
	width: 230px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, var(--brand-100) 100%),
		var(--white);
	border: 2px solid var(--white);
	border-radius: var(--r-16);
	overflow: hidden;
	scroll-snap-align: center;
	transition: transform .2s ease, box-shadow .2s ease;
}
.media-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.media-card--audio { padding: 12px 13px; justify-content: center; gap: 9px; }

.media-card__art img { width: 178px; height: 174px; object-fit: contain; }

.media-card__wave {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.media-card__bars {
	display: flex;
	justify-content: center;
	color: var(--brand-500);
	overflow: hidden;
}
.media-card__bars .icon { margin-inline: 4px; }
.media-card__bars .is-dim { color: var(--brand-200); opacity: .9; }

.media-card__time {
	font-size: 10px;
	color: var(--brand-600);
	opacity: .7;
}
.media-card__wave .media-card__time:first-child { align-self: flex-start; }
.media-card__wave .media-card__time:last-child  { align-self: flex-end; }

.media-card__player {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	width: 100%;
}

.player-side { display: inline-flex; color: var(--brand-400); }

.player-main {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--white);
	background: linear-gradient(180deg, var(--brand-500), var(--brand-400));
	border-radius: 32px;
	box-shadow:
		inset 1px 1px 2px rgba(255, 255, 255, 1),
		inset -1px -1px 2px rgba(0, 0, 0, .1);
}

.media-card--image .media-card__image,
.media-card--video .media-card__image {
	width: calc(100% + 4px);
	margin: -2px -2px 0;
	height: 183px;
	overflow: hidden;
}
.media-card__image img { width: 100%; height: 100%; object-fit: cover; }

.media-card__title {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--ink-strong);
	text-align: right;
	padding: 16px 12px 12px;
	width: 100%;
}

.media-card__link { position: absolute; inset: 0; border-radius: inherit; }

/* hidden by JS filters */
.media-card[hidden] { display: none; }

/* -------------------------------------------------- 9. Features / bento */
.features { margin-top: var(--section-gap); }

.features__intro {
	display: grid;
	/* RTL: lead text on the right, stats card on the left (as designed). */
	grid-template-columns: minmax(0, 632px) minmax(0, 592px);
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 40px 32px 0;
}
.features__intro .stats-card { order: 2; }
.features__intro .features__lead { order: 1; }

/* Stats card (592x230, border 4 white, r24) */
.stats-card {
	background: var(--surface);
	border: 4px solid var(--white);
	border-radius: var(--r-24);
	overflow: hidden;
}

.stats-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 16px;
	padding: 28px 30px;
	background: rgba(255, 255, 255, .7);
	box-shadow: var(--shadow-stats);
}

.stats-card__number {
	font-size: 40px;
	line-height: 1;
	font-weight: 900;
	color: var(--ink);
	direction: ltr;
}

.stats-card__titles { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: right; }
.stats-card__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.stats-card__sub { font-size: 12px; font-weight: 500; color: var(--text-400); }

.stats-card__body { padding: 16px 30px 26px; display: flex; flex-direction: column; gap: 8px; }

.stats-card__line {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--text-600);
	flex-wrap: wrap;
}

.stats-card__avatars { display: inline-flex; flex-direction: row-reverse; }
.stats-card__avatars img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--white);
	object-fit: cover;
}
.stats-card__avatars img + img { margin-inline-end: -8px; }

.stats-card__text { font-size: 16px; line-height: 1.5; color: var(--text-600); }

.features__lead {
	display: flex;
	flex-direction: column;
	/* RTL column flex: flex-start anchors to the RIGHT (as designed) */
	align-items: flex-start;
	gap: 16px;
	text-align: right;
}

.features__title {
	font-size: 20px;
	line-height: 38px;
	font-weight: 900;
	color: var(--ink-strong);
	max-width: 611px;
}

.features__actions { display: flex; gap: 12px; }

/* Bento rows */
.bento {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 32px;
	padding-inline: 32px;
}

.bento-card {
	background: var(--surface);
	border: 8px solid var(--white);
	border-radius: var(--r-28);
	min-height: 336px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.bento-card__title { font-size: 24px; line-height: 1.3; font-weight: 800; color: var(--ink); }

.bento-card__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}
.bento-card__text p { margin: 0; }
.bento-card__text--center { text-align: center; line-height: 1.5; }

/* small card: icon / centered text / button */
.bento-card--small {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 32px 29px;
	text-align: center;
}

.bento-card--tint {
	background: linear-gradient(180deg, var(--brand-200) 0%, var(--white) 100%);
}

.bento-card__icon img { width: 44px; height: 44px; }

/* big card: text + mockup */
.bento-card--big {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 272px;
	gap: 16px;
	padding: 32px;
	align-items: center;
}

.bento-card__content {
	display: flex;
	flex-direction: column;
	/* RTL column flex: flex-start anchors to the RIGHT (as designed) */
	align-items: flex-start;
	gap: 16px;
	text-align: right;
}
.bento-card__content .bento-card__text { align-self: stretch; }

.bento-card__mockup {
	width: 272px;
	height: 272px;
	border-radius: var(--r-24);
	background: linear-gradient(180deg, var(--brand-100) 0%, var(--white) 100%);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.bento-card__mockup img { width: 100%; height: 100%; object-fit: contain; }

/* Bento desktop row pattern — matches the design exactly:
   row1 [small|big] · row2 [big|small] · row3 [small|big] (visual LTR).
   The grid runs LTR so auto-placement mirrors the design; cards restore RTL. */
@media (min-width: 1025px) {
	.bento {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		direction: ltr;
	}
	.bento-card { direction: rtl; }
	.bento-card--small { grid-column: span 1; }
	.bento-card--big { grid-column: span 2; }
}

/* -------------------------------------------------- 10. Models */
.models { margin-top: 56px; }

.models__head { display: flex; justify-content: center; padding-inline: 32px; }

.models__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 32px;
	padding-inline: 32px;
	/* design order runs visually LTR: Grok, deepseek, Claude, Copilot */
	direction: ltr;
}

.model-card {
	position: relative;
	flex: 1 1 296px;
	max-width: 402px;
	min-height: 108px;
}

/* design: first row 4 cards (296px), second row 3 wider cards (401px) */
@media (min-width: 1025px) {
	.models__grid .model-card:nth-child(-n+4) { flex-basis: 276px; max-width: 296px; }
	.models__grid .model-card:nth-child(n+5)  { flex-basis: 380px; max-width: 402px; }
}

.model-card {
	display: grid;
	place-items: center;
	background: var(--white);
	border-radius: var(--r-16);
	padding: 20px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.model-card__logo { max-height: 56px; width: auto; max-width: 220px; object-fit: contain; }

/* Monochrome by default (as designed); the original brand colors fade in on hover. */
.model-card__logo-stack { position: relative; display: inline-grid; place-items: center; }
.model-card__logo-stack .model-card__logo { grid-area: 1 / 1; transition: opacity .25s ease; }
.model-card__logo--color { opacity: 0; }
.model-card:hover .model-card__logo--color,
.model-card:focus-within .model-card__logo--color { opacity: 1; }
.model-card:hover .model-card__logo:not(.model-card__logo--color),
.model-card:focus-within .model-card__logo:not(.model-card__logo--color) { opacity: 0; }
.model-card__name { font-size: 22px; font-weight: 800; color: var(--ink); }
.model-card__link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }

.model-card__badge {
	position: absolute;
	top: 0;
	left: 8px;
	direction: rtl;
	padding: 4px 12px;
	font-size: 14px;
	line-height: 20px;
	color: var(--white);
	border-radius: 0 0 var(--r-8) var(--r-8);
}
.model-card__badge--new  { background: var(--badge-new); }
.model-card__badge--soon { background: var(--brand-500); }

/* -------------------------------------------------- 11. Pricing */
.pricing { margin-top: 56px; }

.pricing__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-inline: 32px;
}

/* Homepage pricing block: right-aligned (RTL start) per request — scoped to
   .pricing so the shared .pricing__head stays centered elsewhere. */
.pricing .pricing__head { align-items: flex-start; text-align: start; padding-inline: 0; }
.pricing .pricing__head .chip { justify-content: flex-start; }
.pricing .pricing__toggle { margin-inline: 0 auto; }

.pricing__toggle {
	display: flex;
	margin: 24px auto 0;
	width: max-content;
	padding: 4px;
	background: var(--white);
	border-radius: var(--r-12);
	box-shadow: var(--shadow-toggle);
}

.pricing__toggle-btn {
	min-width: 88px;
	min-height: 36px;
	padding: 8px 10px;
	border-radius: var(--r-8);
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-strong);
	text-align: center;
	transition: color .15s ease;
}

.pricing__toggle-btn--active,
.pricing__toggle-btn[aria-pressed="true"] {
	background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-key) 100%);
	color: var(--white);
	border-radius: var(--r-10);
	box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, .25);
}

.pricing__panel {
	display: grid;
	grid-template-columns: minmax(0, 775fr) minmax(0, 397fr);
	gap: 24px;
	margin-top: 24px;
	padding: 24px;
	background: var(--panel-pricing);
	border-radius: var(--r-40);
	/* Design order (visual LTR): white card [طلایی|قرمز] then featured رایگان on the right. */
	direction: ltr;
}

.pricing__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--white);
	border-radius: var(--r-24);
	overflow: hidden;
	direction: ltr;
}

.plan { direction: rtl; }

/* Plan column (pad 40, gap 40) */
.plan {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 40px;
	border-radius: var(--r-32);
}

.plan__head { display: flex; flex-direction: column; gap: 32px; align-items: flex-end; width: 100%; }

.plan__name-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
}

.plan__badge {
	margin-inline-end: auto;
	padding: 4px 12px;
	background: rgba(255, 45, 85, .1);
	color: var(--error);
	font-size: 14px;
	line-height: 20px;
	border-radius: var(--r-8);
}

.plan__name { font-size: 20px; line-height: 32px; font-weight: 700; color: var(--ink); }

.plan__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-12);
	overflow: hidden;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .07), 0 3px 2px rgba(0, 0, 0, .04);
}
.plan__icon img { width: 40px; height: 40px; }

.plan__price {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 6px;
	width: 100%;
}

.plan__amount { font-size: 40px; line-height: 1.1; font-weight: 800; color: var(--ink); direction: ltr; }
.plan__currency { font-size: 24px; font-weight: 800; color: var(--ink); }
.plan__period { font-size: 16px; color: var(--ink-soft); margin-inline-end: 4px; }

.plan__desc { font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--ink); text-align: right; }

/* .plan is direction:rtl — flex-start therefore anchors to the RIGHT. */
.plan__features { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: 100%; }
.plan__features-title { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--ink); }

.plan__features ul { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.plan__features li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}

.plan__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--dot);
	display: inline-grid;
	place-items: center;
	flex: none;
}
.plan__dot::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dot-core);
}

.plan__cta { margin-top: auto; width: 100%; }

/* -------------------------------------------------- 12. Analysis carousel */
.analysis { margin-top: var(--section-gap); }

.analysis__panel {
	position: relative;
	max-width: 1244px;
	background: var(--panel-gray);
	border-radius: var(--r-32);
	padding: 0 32px 48px;
	overflow: hidden;
	min-height: 660px;
}

.analysis__ghosts { position: absolute; inset: 0; pointer-events: none; }
.analysis__ghost-row {
	position: absolute;
	display: flex;
	gap: 8px;
	inset-inline-start: -140px;
	width: calc(100% + 280px);
	justify-content: space-between;
}
.analysis__ghost-row span {
	flex: 0 0 280px;
	height: 180px;
	border-radius: var(--r-24);
	background: linear-gradient(180deg, var(--panel-pricing) 0%, var(--white) 100%);
	opacity: .8;
}
.analysis__ghost-row--top    { top: 148px; }
.analysis__ghost-row--bottom { bottom: -44px; }

.analysis__head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-top: 40px;
}
.analysis__head .section-title { font-weight: 500; }

.analysis__carousel {
	position: relative;
	margin-top: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.analysis__track {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 6px;
}
.analysis__track::-webkit-scrollbar { display: none; }

.analysis-card {
	position: relative;
	flex: 0 0 280px;
	width: 280px;
	height: 280px;
	background: var(--white);
	border-radius: var(--r-24);
	box-shadow: var(--shadow-card);
	padding: 20px;
	scroll-snap-align: center;
	overflow: hidden;
}

.analysis-card__head { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: right; }
.analysis-card__title { font-size: 14px; font-weight: 700; color: var(--ink-strong); }
.analysis-card__sub { font-size: 12px; color: var(--text-400); }

.analysis-card__chart { margin-top: 8px; display: grid; place-items: center; }
.analysis-card__chart img { width: 100%; max-width: 228px; height: auto; }

.analysis__nav {
	position: relative;
	z-index: 2;
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-inline: -24px;
	background: #16172e;
	color: var(--white);
	border: 1px solid var(--white);
	border-radius: var(--r-12);
	box-shadow: 0 6px 14px rgba(22, 34, 51, .25);
	transition: background-color .15s ease, transform .15s ease;
}
.analysis__nav:hover { background: var(--ink); transform: scale(1.05); }

/* -------------------------------------------------- 13. CTA */
.cta { margin-top: var(--section-gap); }

.cta__panel {
	max-width: 1244px;
	min-height: 426px;
	background:
		linear-gradient(0deg, rgba(1, 3, 11, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(1, 3, 11, .04) 1px, transparent 1px),
		var(--white);
	background-size: 48px 48px, 48px 48px, auto;
	border-radius: var(--r-32);
	padding: 40px 32px;
	display: grid;
	place-items: center;
}

.cta__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 600px;
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	padding: 24px 32px 32px;
	text-align: center;
	box-shadow: var(--shadow-card);
}
.cta__card .chip { margin-top: -45px; }

.cta__title { font-size: 20px; line-height: 38px; font-weight: 900; color: var(--ink-strong); }

.cta__text {
	font-size: 14px;
	line-height: 22px;
	font-weight: 300;
	color: var(--ink);
	max-width: 466px;
}

/* -------------------------------------------------- 14. Footer (90h) */
.site-footer {
	margin-top: 56px;
	background: var(--white);
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 90px;
	padding-block: 20px;
	flex-wrap: wrap;
}

.site-footer__brand-link { display: inline-flex; align-items: center; gap: 12px; }
.site-footer__mark { width: 40px; height: 40px; }
.site-footer__names img { width: 102px; }

.site-footer__meta { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

.site-footer__menu { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__menu a {
	font-size: 16px;
	line-height: 1.3;
	color: var(--ink);
	transition: color .15s;
}
.site-footer__menu a:hover { color: var(--brand-600); }

.site-footer__copy {
	display: flex;
	gap: 4px;
	font-size: 12px;
	color: var(--text-400);
}

/* Back to top */
.back-to-top {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--ink-strong);
	color: var(--white);
	border-radius: var(--r-12);
	border: 1px solid rgba(255, 255, 255, .25);
	box-shadow: 0 4px 16px rgba(22, 34, 51, .18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.back-to-top:not([hidden]) { opacity: 1; transform: translateY(0); }
.back-to-top[hidden] { display: grid; pointer-events: none; }
.back-to-top:hover { background: var(--brand-600); }
.back-to-top:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.back-to-top__icon { transform: rotate(180deg); }

.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--ink);
	background: var(--surface);
	border-radius: var(--r-8);
	transition: color .15s, background-color .15s;
}
.site-footer__social a:hover { color: var(--brand-600); background: var(--brand-50); }

.site-footer__widgets { flex-basis: 100%; }

/* -------------------------------------------------- 15. Inner pages */
.page-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 48px 24px 8px;
	text-align: center;
}

.page-hero__title { font-size: 28px; line-height: 1.6; font-weight: 900; color: var(--ink-strong); }
.page-hero__lead { max-width: 661px; font-size: 16px; line-height: 1.7; color: var(--text-500); }

.breadcrumbs { margin-top: 8px; font-size: 13px; color: var(--text-400); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 4px; color: var(--line-200); }
.breadcrumbs a { color: var(--text-500); }
.breadcrumbs a:hover { color: var(--brand-600); }

.page-content-card {
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-24);
	padding: clamp(24px, 4vw, 48px);
	margin-top: 32px;
}

/* Rich content (single/page) */
.entry-content { font-size: 16px; line-height: 2; color: var(--text-600); }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { font-size: 24px; font-weight: 800; color: var(--ink-strong); margin-top: 1.8em; }
.entry-content h3 { font-size: 20px; font-weight: 700; color: var(--ink-strong); margin-top: 1.6em; }
.entry-content h4 { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.entry-content a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--brand-700); }
.entry-content ul { list-style: disc; padding-inline-start: 24px; }
.entry-content ol { list-style: persian; padding-inline-start: 24px; }
.entry-content li { margin-top: .4em; }
.entry-content img { border-radius: var(--r-16); }
.entry-content blockquote {
	margin: 1.5em 0;
	padding: 16px 24px;
	background: var(--brand-50);
	border-inline-start: 4px solid var(--brand-400);
	border-radius: var(--r-12);
	color: var(--ink);
}
.entry-content pre {
	direction: ltr;
	text-align: left;
	background: var(--ink-strong);
	color: #f5f5ff;
	padding: 16px 20px;
	border-radius: var(--r-12);
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.7;
}
.entry-content code { background: var(--brand-50); border-radius: 4px; padding: 2px 6px; font-size: .92em; }
.entry-content pre code { background: none; padding: 0; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--line-100); padding: 10px 14px; text-align: right; }
.entry-content th { background: var(--surface); color: var(--ink); }

/* Blog cards */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 2px solid var(--white);
	border-radius: var(--r-16);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: var(--shadow-chipbtn);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.post-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-50); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px; flex: 1; }

.post-card__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.post-card__cats a {
	font-size: 12px;
	color: var(--brand-700);
	background: var(--brand-50);
	border: 1px solid var(--brand-200);
	padding: 2px 10px;
	border-radius: 20px;
}

.post-card__title { font-size: 17px; line-height: 1.7; font-weight: 700; }
.post-card__title a:hover { color: var(--brand-600); }

.post-card__excerpt { font-size: 14px; line-height: 1.8; color: var(--text-500); }

.post-card__meta {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--line-100);
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12px;
	color: var(--text-400);
}
.post-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.post-card__meta .icon { width: 15px; height: 15px; }

/* Single post */
.single-hero { max-width: 872px; margin-inline: auto; padding: 40px 24px 0; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.single-hero__title { font-size: 28px; line-height: 1.7; font-weight: 900; color: var(--ink-strong); }
.single-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 13px; color: var(--text-400); }
.single-hero__meta span { display: inline-flex; align-items: center; gap: 5px; }

.single-thumb { max-width: 872px; margin: 24px auto 0; padding-inline: 24px; }
.single-thumb img { width: 100%; border-radius: var(--r-24); }

.single-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 8px; }
.single-main { min-width: 0; max-width: 872px; width: 100%; margin-inline: auto; }

@media (min-width: 1180px) {
	.single-layout--with-sidebar {
		grid-template-columns: minmax(0, 872px) minmax(280px, 340px);
		justify-content: center;
		align-items: start;
	}
	.single-layout--with-sidebar .single-main { margin-inline: 0; }
	.single-layout--with-sidebar .blog-sidebar { position: sticky; top: 24px; }
}

/* Blog sidebar (single posts + archives, desktop) */
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.side-box {
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	padding: 20px;
}
.side-box__title { font-size: 15px; font-weight: 800; color: var(--ink-strong); margin-bottom: 14px; }

.side-top { display: flex; flex-direction: column; gap: 12px; counter-reset: side-top; }
.side-top li { display: flex; align-items: flex-start; gap: 10px; }
.side-top__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--brand-50);
	color: var(--brand-600);
	font-size: 12px;
	font-weight: 700;
}
.side-top a { font-size: 14px; line-height: 1.7; color: var(--ink); }
.side-top a:hover { color: var(--brand-600); }

.side-picks { display: flex; flex-direction: column; gap: 14px; }
.side-pick { display: flex; gap: 12px; align-items: center; }
.side-pick__img { width: 64px; height: 64px; border-radius: var(--r-12); object-fit: cover; flex: none; }
.side-pick__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.side-pick__title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.6; }
.side-pick:hover .side-pick__title { color: var(--brand-600); }
.side-pick__meta { font-size: 11px; color: var(--text-400); }

.side-cats { display: flex; flex-direction: column; gap: 4px; }
.side-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: var(--r-8);
	font-size: 14px;
	color: var(--ink);
}
.side-cats a:hover { background: var(--surface); color: var(--brand-600); }
.side-cats a span { font-size: 12px; color: var(--text-400); }

/* Clickable category nav (blog index + archives + front-page blog section) */
.cat-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.cat-nav__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 24px;
	background: var(--white);
	border: 1px solid var(--line-100);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	box-shadow: var(--shadow-chipbtn);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cat-nav__chip:hover {
	border-color: var(--brand-300);
	color: var(--brand-700);
	background: var(--brand-50);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(122, 57, 202, .14);
}
.cat-nav__chip--active {
	background: linear-gradient(135deg, var(--ink-strong), #3b3c6d);
	border-color: var(--ink-strong);
	color: var(--white);
}
.cat-nav__chip--active:hover { color: var(--white); background: var(--ink-strong); }
.cat-nav__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 6px;
	border-radius: 12px;
	font-size: 12px;
	background: var(--brand-50);
	color: var(--brand-700);
}
.cat-nav__chip--active .cat-nav__count { background: rgba(255, 255, 255, .18); color: var(--white); }

/* Front-page blog section («مجله هوش مصنوعی هوشینو») */
.front-blog { margin-top: var(--section-gap); }
.front-blog__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.front-blog__desc { max-width: 661px; margin-inline: auto; font-size: 16px; line-height: 1.7; color: var(--text-500); text-align: center; }
.front-blog__more { display: flex; justify-content: center; margin-top: 32px; }

/* Inline related-posts box (mid-article) */
.inline-related {
	margin: 2em 0;
	padding: 20px 24px;
	background: var(--surface);
	border-radius: var(--r-16);
	border-inline-start: 4px solid var(--brand-400);
}
.inline-related__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-strong); margin: 0 0 10px; }
.inline-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.inline-related a { font-size: 14px; color: var(--brand-600); text-decoration: none; }
.inline-related a:hover { text-decoration: underline; }

.toc {
	background: var(--surface);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	padding: 20px 24px;
	margin-bottom: 24px;
}
.toc__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.toc ol { display: flex; flex-direction: column; gap: 6px; font-size: 14px; counter-reset: toc; }
.toc a { color: var(--text-600); }
.toc a:hover { color: var(--brand-600); }
.toc .toc--h3 { padding-inline-start: 18px; font-size: 13px; }

.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.post-tags a {
	font-size: 13px;
	background: var(--surface);
	border: 1px solid var(--line-100);
	color: var(--text-600);
	padding: 4px 14px;
	border-radius: 20px;
}
.post-tags a:hover { border-color: var(--brand-400); color: var(--brand-600); }

.share-box { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.share-box__label { font-size: 14px; color: var(--text-500); display: inline-flex; gap: 6px; align-items: center; }
.share-box a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--r-10);
	background: var(--surface);
	border: 1px solid var(--line-100);
	color: var(--ink);
	transition: all .15s;
}
.share-box a:hover { background: var(--brand-50); color: var(--brand-600); border-color: var(--brand-200); }

.author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--brand-50);
	border: 1px solid var(--brand-200);
	border-radius: var(--r-16);
	padding: 20px 24px;
	margin-top: 32px;
}
.author-box__avatar-link { flex: none; }
.author-box img.author-box__avatar { border-radius: 50%; width: 64px; height: 64px; }
.author-box__body { min-width: 0; }
.author-box__name { display: inline-block; font-weight: 700; color: var(--ink); font-size: 16px; }
.author-box__name:hover { color: var(--brand-600); }
.author-box__role { font-size: 13px; color: var(--brand-600); font-weight: 600; margin-top: 2px; }
.author-box__bio { font-size: 14px; color: var(--text-600); line-height: 1.8; margin-top: 6px; }
.author-box__social { display: flex; gap: 10px; margin-top: 10px; }
.author-box__social a { color: var(--text-500); }
.author-box__social a:hover { color: var(--brand-600); }

/* Author archive hero */
.author-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.author-hero img.author-hero__avatar { border-radius: 50%; width: 96px; height: 96px; margin-bottom: 8px; }
.author-hero__role { font-size: 14px; font-weight: 600; color: var(--brand-600); }
.author-hero__social { display: flex; gap: 12px; margin-top: 8px; }
.author-hero__social a { color: var(--text-500); }
.author-hero__social a:hover { color: var(--brand-600); }

.related { margin-top: 48px; }
.related__title { font-size: 20px; font-weight: 800; color: var(--ink-strong); margin-bottom: 8px; }

/* Post navigation */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.post-nav a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-12);
	padding: 14px 18px;
	font-size: 14px;
	transition: border-color .15s;
}
.post-nav a:hover { border-color: var(--brand-400); }
.post-nav__label { font-size: 12px; color: var(--text-400); }
.post-nav__next { text-align: left; align-items: flex-start; }
.post-nav__prev { align-items: flex-end; text-align: right; }

/* Pagination */
.pagination { display: flex; justify-content: center; margin-top: 40px; }
.pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 8px;
	border-radius: var(--r-10);
	background: var(--white);
	border: 1px solid var(--line-100);
	font-size: 14px;
	color: var(--ink);
	transition: all .15s;
}
.pagination .page-numbers:hover { border-color: var(--brand-400); color: var(--brand-600); }
.pagination .page-numbers.current { background: var(--brand-500); border-color: var(--brand-500); color: var(--white); }
.pagination .page-numbers.dots { border: 0; background: none; }

/* Comments */
.comments { margin-top: 48px; }
.comments__title { font-size: 20px; font-weight: 800; color: var(--ink-strong); margin-bottom: 16px; }
.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment-list .children { margin-top: 16px; padding-inline-start: 32px; display: flex; flex-direction: column; gap: 16px; }
.comment-body {
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	padding: 16px 20px;
}
.comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-meta img { border-radius: 50%; }
.comment-author-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.comment-date { font-size: 12px; color: var(--text-400); }
.comment-text { font-size: 14px; line-height: 1.9; color: var(--text-600); }
.comment-reply-link { font-size: 12px; color: var(--brand-600); }

/* Forms (comments + contact) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 500; color: var(--ink); }

.form-field input,
.form-field textarea {
	border: 1px solid var(--line-100);
	border-radius: var(--r-12);
	background: var(--white);
	padding: 12px 16px;
	font-size: 15px;
	color: var(--ink);
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
}
.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--brand-400);
	box-shadow: 0 0 0 3px var(--brand-100);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--error); }
.form-field .field-error { font-size: 12px; color: var(--error); }

.form-notice { border-radius: var(--r-12); padding: 14px 18px; font-size: 14px; margin-bottom: 20px; }
.form-notice--success { background: #ecfdf3; color: #067647; border: 1px solid #a8f2c6; }
.form-notice--error { background: #fff1f3; color: #c30d4b; border: 1px solid #ffccd7; }

/* Native WP comment form, mapped onto the design system */
.comment-respond {
	margin-top: 40px;
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	padding: 24px;
}
.comment-reply-title { font-size: 20px; font-weight: 800; color: var(--ink-strong); margin-bottom: 16px; }
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comment-form p { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.comment-form .comment-notes,
.comment-form .comment-form-comment,
.comment-form .comment-form-cookies-consent,
.comment-form .logged-in-as,
.comment-form .form-submit { grid-column: 1 / -1; }
.comment-form label { font-size: 14px; font-weight: 500; color: var(--ink); }
.comment-form .comment-notes { font-size: 12px; color: var(--text-400); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	border: 1px solid var(--line-100);
	border-radius: var(--r-12);
	background: var(--white);
	padding: 12px 16px;
	font-size: 15px;
	color: var(--ink);
	width: 100%;
	transition: border-color .15s, box-shadow .15s;
}
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--brand-400);
	box-shadow: 0 0 0 3px var(--brand-100);
}
.comment-form-cookies-consent { flex-direction: row !important; align-items: center; }
.comment-form-cookies-consent input { width: auto; }
/* the submit input carries .btn .btn--primary .btn--md — normalize input quirks;
   brand-600 keeps AA contrast for this text-only control (not part of the Figma page) */
.comment-form .form-submit input[type="submit"] {
	font-family: inherit;
	border: 0;
	cursor: pointer;
	background: var(--brand-600);
}
.comment-form .form-submit input[type="submit"]:hover { background: #8e27c9; }
@media (max-width: 640px) {
	.comment-form { grid-template-columns: 1fr; }
}

.hp-field { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.faq-item { background: var(--white); border: 1px solid var(--line-100); border-radius: var(--r-16); overflow: hidden; }
.faq-item__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	text-align: right;
}
.faq-item__q .icon { color: var(--brand-600); transition: transform .2s; }
.faq-item__q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq-item__a { padding: 0 22px 18px; font-size: 15px; line-height: 1.9; color: var(--text-600); }
.faq-item__a[hidden] { display: none; }

/* ============================================================ AI generator landing */
.generator-breadcrumb { margin: 4px 0 8px; }
.generator-breadcrumb .breadcrumbs { margin-top: 0; }
.generator-breadcrumb .breadcrumbs ol { justify-content: flex-start; }

.page-hero--generator {
	margin-bottom: 8px;
	padding-top: 8px;
	background:
		radial-gradient(60% 120% at 50% -10%, var(--brand-50) 0%, rgba(251, 245, 255, 0) 70%);
}
.generator-badge {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 20px;
	color: var(--white);
	background: linear-gradient(140deg, var(--brand-500) 0%, var(--brand-700) 100%);
	box-shadow: 0 12px 26px -8px rgba(164, 56, 229, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
	animation: generator-badge-float 4s ease-in-out infinite;
}
@keyframes generator-badge-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.prompt-box {
	position: relative;
	width: min(720px, 100%);
	margin: 28px auto 0;
	/* gradient border via padding-box/border-box layering */
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		linear-gradient(140deg, var(--brand-200), var(--brand-500) 55%, var(--brand-700)) border-box;
	border: 2px solid transparent;
	border-radius: var(--r-28);
	box-shadow: 0 24px 48px -20px rgba(164, 56, 229, .35), var(--shadow-search);
	padding: 28px;
	overflow: hidden;
	/* Reserve a stable height so switching form → generating → ready doesn't
	   collapse the card and shove the page content up/down. */
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* The three states fill the reserved height and stay vertically centred. */
.prompt-box__form,
.prompt-box__generating,
.prompt-box__ready { flex: 1 0 auto; justify-content: center; }
/* soft brand glow inside the card */
.prompt-box__glow {
	position: absolute;
	inset-inline-start: -80px;
	top: -90px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--brand-100) 0%, rgba(245, 233, 254, 0) 70%);
	pointer-events: none;
}

.prompt-box__form { position: relative; display: flex; flex-direction: column; gap: 18px; }
.prompt-box__form[hidden] { display: none; }

.prompt-box__field { position: relative; }
.prompt-box__field-icon {
	position: absolute;
	top: 15px;
	inset-inline-start: 16px;
	display: inline-flex;
	color: var(--brand-500);
	pointer-events: none;
}
.prompt-box__input {
	width: 100%;
	min-height: 116px;
	resize: vertical;
	border: 1.5px solid var(--line-100);
	border-radius: var(--r-16);
	background: var(--surface);
	/* logical padding: inline-start reserves room for the icon on the correct
	   side in RTL (right) so the text never runs under it. */
	padding: 15px 18px;
	padding-inline-start: 52px;
	font: inherit;
	font-size: 16px;
	line-height: 1.9;
	color: var(--ink);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.prompt-box__input::placeholder { color: var(--text-500); }
.prompt-box__input:focus {
	outline: none;
	background: var(--white);
	border-color: var(--brand-400);
	box-shadow: 0 0 0 4px var(--brand-100);
}

.prompt-box__row {
	display: flex;
	align-items: end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.prompt-box__extra { display: flex; flex-direction: column; gap: 6px; }
.prompt-box__extra-label { font-size: 13px; font-weight: 500; color: var(--text-500); }
.prompt-box__select {
	min-height: 48px;
	border: 1.5px solid var(--line-100);
	border-radius: var(--r-12);
	background: var(--white);
	padding: 8px 16px;
	font: inherit;
	color: var(--ink);
	cursor: pointer;
}
.prompt-box__select:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-100); }
.prompt-box__btn {
	margin-inline-start: auto;
	background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
	box-shadow: 0 10px 22px -8px rgba(164, 56, 229, .6);
}
.prompt-box__btn:hover { background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%); }

.prompt-box__examples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prompt-box__examples-label { font-size: 13px; font-weight: 500; color: var(--text-500); margin-inline-end: 4px; }
.example-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 15px;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-24);
	font-size: 13px;
	line-height: 1.6;
	color: var(--brand-700);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.example-chip > span { color: var(--brand-400); font-size: 11px; }
.example-chip:hover { background: var(--brand-100); transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(164, 56, 229, .4); }

.prompt-box__generating { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 34px 8px; }
.prompt-box__generating[hidden] { display: none; }
.prompt-box__spinner {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: var(--brand-600);
	background: var(--brand-50);
	box-shadow: 0 0 0 0 rgba(164, 56, 229, .4);
	animation: prompt-pulse 1.4s ease-out infinite;
}
@keyframes prompt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(164, 56, 229, .35); }
	70%  { box-shadow: 0 0 0 18px rgba(164, 56, 229, 0); }
	100% { box-shadow: 0 0 0 0 rgba(164, 56, 229, 0); }
}
.prompt-box__generating-label { font-size: 16px; font-weight: 600; color: var(--ink-strong); }
.prompt-box__progress {
	width: min(340px, 100%);
	height: 8px;
	background: var(--line-100);
	border-radius: var(--r-24);
	overflow: hidden;
}
.prompt-box__progress > span {
	display: block;
	height: 100%;
	width: 40%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
	animation: prompt-progress 1.1s ease-in-out infinite;
}
@keyframes prompt-progress {
	0%   { margin-inline-start: -40%; }
	100% { margin-inline-start: 100%; }
}

.prompt-box__ready { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 8px; }
.prompt-box__ready[hidden] { display: none; }
.prompt-box__ready-check {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(140deg, #16c98d, #0ea472);
	color: var(--white);
	box-shadow: 0 12px 24px -8px rgba(14, 164, 114, .6);
	animation: prompt-pop .4s ease-out both;
}
@keyframes prompt-pop {
	0%   { transform: scale(.4); opacity: 0; }
	60%  { transform: scale(1.12); }
	100% { transform: scale(1); opacity: 1; }
}
.prompt-box__ready-title { font-size: 18px; font-weight: 700; color: var(--ink-strong); }
.prompt-box__ready-sub { font-size: 13.5px; color: var(--text-500); max-width: 380px; line-height: 1.8; text-align: center; margin-top: -4px; }
.prompt-box__ready-btn {
	background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
	box-shadow: 0 12px 24px -8px rgba(164, 56, 229, .6);
}

/* Fake "locked" preview — blurred result the visitor must sign in to unlock. */
.fake-preview {
	position: relative;
	width: min(320px, 100%);
	border-radius: var(--r-16);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line-100);
	animation: prompt-pop .4s ease-out both;
}
.fake-preview__stage { min-height: 150px; display: grid; place-items: center; }
.fake-preview__img {
	width: 100%;
	height: 176px;
	object-fit: cover;
	filter: blur(14px) saturate(1.1);
	transform: scale(1.15); /* hide blurred edges */
}
.fake-preview--audio .fake-preview__stage,
.fake-preview--text .fake-preview__stage { padding: 26px 24px; }
.fake-preview__wave { display: flex; align-items: center; gap: 4px; height: 90px; filter: blur(4px); }
.fake-preview__wave span {
	flex: 1;
	border-radius: 3px;
	background: linear-gradient(var(--brand-400), var(--brand-600));
	height: 30%;
	animation: fake-wave 1.1s ease-in-out infinite;
}
.fake-preview__wave span:nth-child(3n) { height: 80%; }
.fake-preview__wave span:nth-child(4n) { height: 55%; }
.fake-preview__wave span:nth-child(5n) { height: 95%; }
@keyframes fake-wave { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
.fake-preview__text { display: flex; flex-direction: column; gap: 11px; width: 100%; filter: blur(5px); }
.fake-preview__text span {
	height: 11px;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--brand-200), var(--line-100));
}
.fake-preview__text span:nth-child(2) { width: 92%; }
.fake-preview__text span:nth-child(3) { width: 78%; }
.fake-preview__text span:nth-child(4) { width: 96%; }
.fake-preview__text span:nth-child(5) { width: 64%; }
.fake-preview__text span:nth-child(6) { width: 85%; }
.fake-preview__lock {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .28);
}
.fake-preview__lock-badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: var(--white);
	background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
	box-shadow: 0 10px 22px -6px rgba(164, 56, 229, .6);
}

@media (prefers-reduced-motion: reduce) {
	.generator-badge, .prompt-box__spinner, .prompt-box__ready-check, .prompt-box__progress > span, .fake-preview, .fake-preview__wave span { animation: none; }
}

.generator-showcase { margin-top: var(--section-gap); display: flex; flex-direction: column; gap: 24px; align-items: center; }
.generator-showcase .media-strip { width: min(1120px, 100%); }
.generator-faq { margin-top: var(--section-gap); }

/* Immersive full-bleed stage wrapping the hero + big chat box. */
.generator-stage {
	position: relative;
	isolation: isolate;
	/* break out of .container-wide to the viewport edges (html has overflow-x:clip) */
	margin-inline: calc(50% - 50vw);
	padding: clamp(28px, 5vw, 76px) max(var(--gutter), calc(50vw - var(--container) / 2)) clamp(48px, 6vw, 104px);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% -20%, var(--brand-100) 0%, rgba(245, 233, 254, 0) 60%),
		linear-gradient(180deg, var(--brand-50) 0%, var(--bg) 82%);
}
.generator-stage__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin-inline: auto;
	text-align: center;
}
.generator-stage__aurora {
	position: absolute;
	z-index: 0;
	inset: -22% -10% auto;
	height: 480px;
	pointer-events: none;
	background:
		radial-gradient(38% 60% at 22% 30%, rgba(183, 89, 243, .34), transparent 70%),
		radial-gradient(34% 56% at 78% 24%, rgba(203, 135, 249, .30), transparent 70%),
		radial-gradient(30% 50% at 52% 68%, rgba(142, 39, 201, .20), transparent 72%);
	filter: blur(46px);
	animation: stage-aurora 16s ease-in-out infinite alternate;
}
@keyframes stage-aurora {
	0%   { transform: translate3d(-2%, 0, 0) scale(1); }
	100% { transform: translate3d(3%, 3%, 0) scale(1.08); }
}
.generator-stage__grid {
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(164, 56, 229, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 56, 229, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: radial-gradient(78% 72% at 50% 28%, #000 38%, transparent 80%);
	        mask-image: radial-gradient(78% 72% at 50% 28%, #000 38%, transparent 80%);
}
.generator-stage .generator-breadcrumb { display: flex; justify-content: center; }
.generator-stage .generator-breadcrumb .breadcrumbs ol { justify-content: center; }
.generator-stage .page-hero--generator { background: none; margin-bottom: 0; padding-top: 0; }
.generator-stage .page-hero__title { font-size: clamp(28px, 4.4vw, 46px); }
.generator-stage .page-hero__lead { margin-inline: auto; font-size: clamp(15px, 1.6vw, 18px); }

/* Big "chat" box variant. */
.prompt-box--xl {
	width: min(860px, 100%);
	margin-top: 36px;
	min-height: 400px;
	padding: clamp(24px, 3.2vw, 40px);
	border-radius: var(--r-32);
	box-shadow: 0 40px 80px -32px rgba(164, 56, 229, .5), var(--shadow-search);
	/* the stage centres its text; keep the box's own content RTL-start aligned */
	text-align: start;
}
.prompt-box--xl .prompt-box__input { min-height: 150px; font-size: 17px; }
.prompt-box--xl .prompt-box__btn { min-height: 56px; padding-inline: 30px; font-size: 16px; }

/* "About this tool" — SEO-rich unique body copy. */
.about-tool { margin-top: var(--section-gap); }
.about-tool__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	margin-bottom: 22px;
}
.about-tool .page-content-card { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	.generator-stage__aurora { animation: none; }
}
@media (max-width: 640px) {
	.prompt-box--xl { min-height: 360px; }
}

/* Prompt guide — ready prompts + key tips (per-page differentiation).
   Sits directly under the box; stacked layout stays tidy at any prompt length. */
.prompt-guide { margin-top: 36px; }
.prompt-guide__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.prompt-guide__head .section-sub { max-width: 640px; }
.prompt-guide__body {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 28px;
}
.prompt-guide__subtitle { font-size: 15px; font-weight: 700; color: var(--ink-strong); margin-bottom: 14px; }

.prompt-guide__list { display: flex; flex-direction: column; gap: 12px; }
.guide-prompt {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	background: var(--white);
	border: 1px solid var(--line-100);
	border-inline-start: 3px solid var(--brand-200);
	border-radius: var(--r-12);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.guide-prompt:hover { border-inline-start-color: var(--brand-500); box-shadow: var(--shadow-card); }
.guide-prompt__text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--ink);
	/* long, unbroken prompts wrap instead of overflowing */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.guide-prompt__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-prompt__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 6px 16px;
	border-radius: var(--r-8);
	font-size: 13px;
	font-weight: 500;
	color: var(--white);
	background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.guide-prompt__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(164, 56, 229, .55); }
.guide-prompt__btn--ghost { background: var(--brand-50); color: var(--brand-700); }
.guide-prompt__btn--ghost:hover { background: var(--brand-100); box-shadow: none; }
.guide-prompt__btn.is-copied { background: linear-gradient(135deg, #16c98d, #0ea472); color: var(--white); }

.prompt-guide__tips {
	padding: 24px;
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	border-radius: var(--r-16);
}
.tips-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}
.tips-list__item { display: flex; align-items: start; gap: 10px; font-size: 14px; line-height: 1.85; color: var(--ink); }
.tips-list__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--brand-500);
	color: var(--white);
	margin-top: 2px;
}

@media (max-width: 620px) {
	.tips-list { grid-template-columns: 1fr; }
	.guide-prompt__btn { flex: 1; justify-content: center; }
}

/* /tool/ hub index grid */
.tool-hub-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.tool-hub-card { display: flex; }
.tool-hub-card__link {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 20px;
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	box-shadow: var(--shadow-card);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tool-hub-card__link:hover {
	transform: translateY(-3px);
	border-color: var(--brand-200);
	box-shadow: 0 18px 30px -16px rgba(164, 56, 229, .4);
}
.tool-hub-card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-12);
	color: var(--white);
	background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
}
.tool-hub-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tool-hub-card__badge { font-size: 12px; color: var(--brand-600); font-weight: 500; }
.tool-hub-card__title { font-size: 16px; font-weight: 700; color: var(--ink-strong); }
.tool-hub-card__sub { font-size: 13px; line-height: 1.6; color: var(--text-500); }
.tool-hub-card__arrow { flex: none; color: var(--brand-500); margin-inline-start: auto; transition: transform .2s ease; }
.tool-hub-card__link:hover .tool-hub-card__arrow { transform: translateX(-4px); }

@media (max-width: 900px) { .tool-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tool-hub-grid { grid-template-columns: 1fr; } }

/* Other AI tools — 4-up internal-link silo */
.ai-tools { margin-top: var(--section-gap); }
.ai-tools__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	margin-bottom: 28px;
}
.ai-tools__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.ai-tools__item { display: flex; }
.ai-tool-card {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 18px;
	background: var(--white);
	border: 1px solid var(--line-100);
	border-radius: var(--r-16);
	box-shadow: var(--shadow-card);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ai-tool-card:hover {
	transform: translateY(-3px);
	border-color: var(--brand-200);
	box-shadow: 0 18px 30px -16px rgba(164, 56, 229, .4);
}
.ai-tool-card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: var(--r-12);
	color: var(--white);
	background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
	box-shadow: 0 8px 18px -8px rgba(164, 56, 229, .6);
}
.ai-tool-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ai-tool-card__name { font-size: 15px; font-weight: 700; color: var(--ink-strong); }
.ai-tool-card__sub {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--text-500);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ai-tool-card__arrow { flex: none; color: var(--brand-400); margin-inline-start: auto; transition: transform .2s ease; }
.ai-tool-card:hover .ai-tool-card__arrow { transform: translateX(-4px); }

@media (max-width: 960px) { .ai-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ai-tools__grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
	.prompt-box { padding: 18px; border-radius: var(--r-24); }
	.prompt-box__row { flex-direction: column; align-items: stretch; }
	.prompt-box__extra { width: 100%; }
	.prompt-box__select { width: 100%; }
	.prompt-box__btn { width: 100%; margin-inline-start: 0; }
	.prompt-box__ready-btn { width: 100%; justify-content: center; }
	.generator-badge { width: 60px; height: 60px; }
}

/* Services grid */
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
	background: var(--surface);
	border: 4px solid var(--white);
	border-radius: var(--r-24);
	padding: 32px 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.service-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	color: var(--white);
	background: linear-gradient(180deg, var(--brand-500), var(--brand-400));
	border-radius: var(--r-12);
	box-shadow: inset 5px 5px 8px rgba(255, 255, 255, .2);
}
.service-card__title { font-size: 18px; font-weight: 800; color: var(--ink); }
.service-card__text { font-size: 14px; line-height: 1.8; color: var(--text-500); }

.testimonial-stars { display: flex; gap: 2px; }
.testimonial-stars .icon.star--on { color: var(--brand-500); }
.testimonial-stars .icon.star--off { color: var(--line-200); }

/* 404 */
.error-404 { text-align: center; padding: 72px 24px; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.error-404__code { font-size: 96px; font-weight: 900; line-height: 1; color: var(--brand-500); }
.error-404__title { font-size: 24px; font-weight: 800; color: var(--ink-strong); }
.error-404__text { color: var(--text-500); max-width: 480px; }
.error-404 .search-bar { max-width: 480px; }

/* Archive header */
.archive-head { text-align: center; padding: 48px 24px 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.archive-head__title { font-size: 26px; font-weight: 900; color: var(--ink-strong); }
.archive-head__desc { color: var(--text-500); max-width: 640px; font-size: 15px; line-height: 1.8; }

/* Reveal animation */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
	.reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* -------------------------------------------------- 16. Responsive */
@media (max-width: 1200px) {
	.hero__panel { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	/* Tablet (834 design): hero stacks & centers */
	.hero__panel {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		padding: 40px 24px;
	}
	.hero__content { align-items: center; text-align: center; }
	.hero__content .chip { justify-content: center; }
	.hero__title { font-size: 26px; line-height: 42px; }
	.hero__media { order: 2; margin-top: 24px; }

	.features__intro { grid-template-columns: 1fr; padding-inline: 0; }
	.features__lead { align-items: center; text-align: center; }
	.features__lead .chip { justify-content: center; }
	.features__title { max-width: none; }

	.bento { padding-inline: 0; }
	.bento-card--big { grid-template-columns: 1fr; justify-items: center; }
	.bento-card__content { align-items: center; text-align: center; }
	.bento-card__content .bento-card__text { text-align: center; }

	.models__grid, .models__head { padding-inline: 0; }
	.pricing__head { padding-inline: 0; }
	.pricing__panel { grid-template-columns: 1fr; }
	.pricing__card { grid-template-columns: 1fr 1fr; }

	.posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.site-nav {
		position: absolute;
		top: 100%;
		inset-inline: 16px;
		background: var(--white);
		border: 1px solid var(--line-100);
		border-radius: var(--r-16);
		box-shadow: var(--shadow-card);
		padding: 12px 20px;
		display: none;
		z-index: 30;
	}
	.site-nav.is-open { display: block; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
	.site-nav__list a { display: block; padding: 10px 8px; }
	.site-header__toggle { display: inline-grid; place-items: center; }
	.site-header__rule { display: none; }
	.site-header__mark { margin-inline: auto; }
}

@media (max-width: 640px) {
	/* Mobile (375 design) */
	:root { --gutter: 16px; --section-gap: 40px; }

	.site-header__inner { min-height: 72px; gap: 8px; }
	.site-brand__name img { width: 88px; }
	.site-header__mark { display: none; }
	/* Mobile header layout: brand (start/right) · CTA centered · burger (end/left). */
	.site-brand { order: 0; }
	.site-header__cta { order: 1; margin-inline: auto; }
	.site-header__toggle { order: 2; }

	.hero__panel { padding: 32px 16px; min-height: 0; }
	.hero__title { font-size: 22px; line-height: 36px; }
	.hero__actions { width: 100%; }
	.hero__actions .btn { flex: 1 1 auto; }
	.hero__media { width: min(340px, 92vw); }
	.hero__tile { width: 44px; height: 44px; }
	.hero__tile img { width: 32px; height: 32px; }

	.section-title { font-size: 20px; line-height: 32px; }

	.search-bar__input { padding-inline-start: 108px; font-size: 14px; }
	.media-strip { padding: 12px; }
	.media-card { flex-basis: 220px; width: 220px; }

	.stats-card__top { flex-direction: column-reverse; align-items: center; text-align: center; gap: 8px; }
	.stats-card__titles { align-items: center; text-align: center; }
	.stats-card__body { padding: 16px 20px 22px; }
	.stats-card__line { justify-content: center; }
	.features__actions { flex-direction: column; width: 100%; }
	.features__actions .btn { width: 100%; }

	.bento-card--big, .bento-card--small { padding: 24px 20px; }
	.bento-card__mockup { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1; }
	.bento-card__title { font-size: 20px; }

	.pricing__card { grid-template-columns: 1fr; }
	.plan { padding: 28px 24px; gap: 28px; }
	.plan__amount { font-size: 34px; }
	.pricing__panel { padding: 12px; border-radius: var(--r-24); }

	.analysis__panel { min-height: 0; padding: 0 16px 32px; }
	.analysis__nav { display: none; }
	.analysis__track { padding: 4px; }

	.cta__panel { padding: 32px 16px; }
	.cta__card { padding: 20px 16px 24px; }
	.cta__card .chip { margin-top: -40px; }

	.site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
	.site-footer__meta { align-items: center; }
	.site-footer__menu { justify-content: center; }

	.posts-grid, .services-grid { grid-template-columns: 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.post-nav { grid-template-columns: 1fr; }
	.single-hero__title { font-size: 22px; }
	.page-hero__title { font-size: 24px; }
}