/*
 * Main stylesheet — komponente se dodaju kako se templati portiraju iz mocková.
 *
 * Phase 1: header + footer + utility (gotovo)
 * Phase 2a: HERO + STATS + TRUST (ovo dolje)
 * Phase 2b: katalog (tab grid s vještinama)
 * Phase 2c: paketi + razgovor + o meni
 * Phase 2d: stvarne situacije + FAQ + final CTA
 */

/* ─── CONTAINER ─── */
.ae-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .ae-container { padding: 0 36px; } }
.ae-container--narrow  { max-width: var(--container-narrow); }
.ae-container--reading { max-width: var(--container-reading); }

/* ─── HEADER ─── */
.ae-header {
	position: sticky; top: 16px; z-index: 50;
	padding: 0 24px;
}
.ae-header__inner {
	max-width: var(--container-max); margin: 0 auto;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 9px 12px 9px 22px;
	display: flex; align-items: center; justify-content: space-between;
	box-shadow: 0 8px 24px -16px rgba(21, 23, 28, 0.10);
}
.ae-logo {
	font-family: var(--display); font-size: 17px; font-weight: 700;
	letter-spacing: -0.035em;
	display: inline-flex; align-items: center; gap: 9px;
}
.ae-logo-mark {
	width: 28px; height: 28px; background: var(--ink);
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink-light); font-size: 11px; font-weight: 700;
	font-family: var(--display); position: relative;
}
.ae-logo-mark::after {
	content: ''; position: absolute; top: 5px; right: 5px;
	width: 5px; height: 5px;
	background: var(--accent); border-radius: 50%;
}
.ae-nav { display: none; }
@media (min-width: 1024px) { .ae-nav { display: inline-flex; align-items: center; gap: 2px; } }
.ae-nav a {
	padding: 8px 14px; font-size: 14px; color: var(--ink-2);
	border-radius: 999px; font-weight: 500;
	transition: all 150ms;
}
.ae-nav a:hover, .ae-nav a.is-active { color: var(--ink); background: var(--bg-soft); }
.ae-header__cta {
	padding: 10px 18px; background: var(--ink); color: var(--ink-light);
	border-radius: 999px; font-size: 13.5px; font-weight: 600;
	display: inline-flex; align-items: center; gap: 6px;
	transition: all 150ms;
}
.ae-header__cta:hover { background: var(--accent); transform: translateY(-1px); }

/* ─── FOOTER ─── */
.ae-footer {
	padding: 60px 0 28px;
}
.ae-footer__container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .ae-footer__container { padding: 0 36px; } }

.ae-footer__top { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
@media (min-width: 768px) { .ae-footer__top { grid-template-columns: 1.4fr 2fr; } }

.ae-footer__brand {
	font-family: var(--display); font-size: 22px; font-weight: 700;
	margin-bottom: 12px; letter-spacing: -0.025em;
	display: inline-flex; align-items: center; gap: 9px;
	color: var(--ink-light);
}
.ae-footer__brand-mark {
	width: 28px; height: 28px; background: var(--ink-light);
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--ink); font-size: 12px; font-weight: 700;
	position: relative;
}
.ae-footer__brand-mark::after {
	content: ''; position: absolute; top: 5px; right: 5px;
	width: 5px; height: 5px;
	background: var(--accent); border-radius: 50%;
}
.ae-footer__tagline {
	font-size: 14px; color: var(--ink-light-3);
	max-width: 340px; line-height: 1.55;
}
.ae-footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.ae-footer__col-head {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-light-3); letter-spacing: 0.08em;
	text-transform: uppercase; margin-bottom: 14px; font-weight: 600;
}
.ae-footer__col a {
	display: block; font-size: 14px; color: var(--ink-light-2);
	padding: 4px 0; transition: color 150ms;
}
.ae-footer__col a:hover { color: var(--ink-light); }
.ae-footer__bottom {
	margin-top: 40px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.10);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	font-family: var(--mono); font-size: 12px; color: var(--ink-light-3);
}

/* ─── BUTTONS ─── */
.ae-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 24px;
	border-radius: 12px;
	font-weight: 600; font-size: 15px;
	transition: all 150ms;
	border: 1.5px solid transparent;
	cursor: pointer;
}
.ae-btn--primary { background: var(--ink); color: var(--ink-light); }
.ae-btn--primary:hover { background: var(--accent); transform: translateY(-1px); }
.ae-btn--secondary {
	background: transparent; color: var(--ink);
	border-color: var(--ink);
}
.ae-btn--secondary:hover { background: var(--ink); color: var(--ink-light); }

/* ─── EYEBROW ─── */
.ae-eyebrow {
	font-family: var(--mono);
	font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-2); margin-bottom: 20px; font-weight: 600;
	display: inline-flex; align-items: center; gap: 12px;
}
.ae-eyebrow::before {
	content: ''; width: 24px; height: 1.5px; background: var(--accent);
}

/* ─── SECTION BASE ─── */
.ae-section { padding: var(--section-py) 0; position: relative; }
@media (min-width: 1024px) { .ae-section { padding: var(--section-py-lg) 0; } }
.ae-section--soft { background: var(--bg-soft); }
.ae-section--dark { background: var(--bg-dark); color: var(--ink-light); }


/* ═══════════════════════════════════════════
   PHASE 2a — HERO + STATS + TRUST
   ═══════════════════════════════════════════ */

/* ─── HERO ─── */
.hero { padding: 56px 0 70px; position: relative; }
@media (min-width: 1024px) { .hero { padding: 70px 0 100px; } }

.hero__grid {
	display: grid; grid-template-columns: 1fr; gap: 56px;
	align-items: center;
}
@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 80px;
	}
}

.hero__pretitle {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 7px 14px 7px 10px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-family: var(--mono); font-size: 12px; color: var(--ink-2);
	margin-bottom: 26px;
}
.hero__pretitle::before {
	content: ''; width: 7px; height: 7px; background: var(--green);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.18);
}
.hero__pretitle--regions {
	font-family: var(--display);
	font-size: 12.5px; letter-spacing: 0.18em;
	color: var(--ink); font-weight: 700;
	padding: 8px 18px 8px 14px;
}
.hero__pretitle--regions span { display: inline-block; }
.hero__pretitle--regions i {
	display: inline-block;
	width: 4px; height: 4px;
	background: var(--ink-3); border-radius: 50%;
	margin: 0 4px;
}

.hero__title {
	font-family: var(--display); font-size: 44px;
	line-height: 1.0; letter-spacing: -0.045em; font-weight: 700;
	margin-bottom: 26px;
	color: var(--ink); text-wrap: balance;
	font-variation-settings: 'opsz' 96;
}
@media (min-width: 768px) { .hero__title { font-size: 66px; } }
@media (min-width: 1280px) { .hero__title { font-size: 74px; } }
.hero__title em { font-style: italic; font-weight: 600; font-variation-settings: 'opsz' 96; }
.hero__title-mark {
	display: inline-block;
	background: var(--accent); color: white;
	padding: 0 14px;
	border-radius: 12px;
	transform: rotate(-1.5deg);
	font-style: normal; font-weight: 700;
	margin: 0 4px;
}
.hero__title-nowrap { white-space: nowrap; display: inline-block; }
@media (max-width: 600px) { .hero__title-nowrap { white-space: normal; } }

.hero__subtitle {
	font-size: 19px; line-height: 1.6;
	color: var(--ink-2); margin-bottom: 32px; max-width: 540px;
}
.hero__subtitle strong { color: var(--ink); font-weight: 600; }

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

/* ─── HERO VISUAL ─── */
.hero__visual {
	position: relative;
	aspect-ratio: 1 / 1.18;
	max-width: 540px;
	margin: 0 auto;
	width: 100%;
}
.hero__photo {
	position: absolute; inset: 0;
	border-radius: 28px;
	overflow: hidden;
	background: var(--bg-deep);
	z-index: 1;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(21, 23, 28, 0.12) 90%, rgba(21, 23, 28, 0.20) 100%);
	pointer-events: none;
}

.hero__chat {
	position: absolute;
	bottom: 18%; left: -28px;
	z-index: 3;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 18px 18px 18px 4px;
	padding: 14px 18px 14px 16px;
	max-width: 280px;
	box-shadow: 0 18px 36px -14px rgba(21, 23, 28, 0.22);
	display: flex; gap: 12px; align-items: flex-start;
}
@media (max-width: 600px) { .hero__chat { left: 0; max-width: 88%; } }
.hero__chat-avatar {
	flex-shrink: 0;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--accent); color: white;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--display); font-size: 13px; font-weight: 700;
}
.hero__chat-body { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.hero__chat-name {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-3); letter-spacing: 0.06em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 3px;
}

.hero__result {
	position: absolute;
	top: 8%; right: -32px;
	z-index: 3;
	background: var(--ink); color: var(--ink-light);
	border-radius: 16px;
	padding: 16px 18px;
	width: 240px;
	box-shadow: 0 24px 44px -18px rgba(21, 23, 28, 0.34);
}
@media (max-width: 600px) { .hero__result { right: 0; width: 220px; } }
.hero__result-head {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-light-3); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 10px;
	display: flex; align-items: center; gap: 8px;
}
.hero__result-head::before {
	content: ''; width: 8px; height: 8px;
	background: var(--green); border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.25);
}
.hero__result-title {
	font-family: var(--display); font-size: 16px;
	font-weight: 700; letter-spacing: -0.02em;
	line-height: 1.25;
	margin-bottom: 8px;
}
.hero__result-meta {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-light-2);
	line-height: 1.5;
}
.hero__result-meta strong { color: var(--ink-light); font-weight: 600; }

.hero__sticker {
	position: absolute;
	top: -12px; left: 20px;
	background: var(--ink); color: var(--ink-light);
	padding: 7px 14px; border-radius: 999px;
	font-family: var(--display); font-size: 12.5px; font-weight: 700;
	letter-spacing: -0.01em;
	transform: rotate(-4deg);
	z-index: 4;
	box-shadow: 0 6px 14px -6px rgba(21, 23, 28, 0.20);
}

.hero__dots {
	position: absolute;
	bottom: -28px; right: -28px;
	width: 140px; height: 140px;
	background-image: radial-gradient(circle at 1px 1px, var(--ink-3) 1.5px, transparent 0);
	background-size: 14px 14px;
	opacity: 0.35;
	border-radius: 4px;
	z-index: 0;
}

/* ─── STATS STRIP ─── */
.stats-strip {
	padding: 40px 0 56px;
	border-top: 1px dashed var(--border);
}
.stats-strip__grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (min-width: 768px) { .stats-strip__grid { grid-template-columns: repeat(4, 1fr); } }
.stats-strip__item {
	position: relative;
	text-align: center;
	padding: 0 14px;
}
@media (min-width: 768px) {
	.stats-strip__item:not(:last-child)::after {
		content: ''; position: absolute;
		right: 0; top: 14%; bottom: 14%;
		width: 1px; background: var(--border-2);
	}
}
.stats-strip__num {
	font-family: var(--display); font-size: 48px;
	font-weight: 800; letter-spacing: -0.045em;
	color: var(--ink); line-height: 1;
	margin-bottom: 8px;
}
@media (min-width: 768px) { .stats-strip__num { font-size: 60px; } }
.stats-strip__num .pct { color: var(--accent); }
.stats-strip__label {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.06em;
	text-transform: uppercase; font-weight: 600;
	line-height: 1.4;
}

/* ─── TRUST STRIP ─── */
.trust {
	padding: 32px 0;
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.trust__inner {
	display: flex; align-items: center; gap: 36px;
	flex-wrap: wrap; justify-content: center;
}
.trust__label {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-2); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 600;
}
.trust__list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 20px 30px;
}
.trust__item {
	font-family: var(--display); font-size: 17px;
	font-weight: 600; color: var(--ink);
	letter-spacing: -0.02em;
	opacity: 0.75;
	transition: opacity 200ms;
}
.trust__item:hover { opacity: 1; }

@media (max-width: 767px) {
	.hero__title { font-size: 40px; }
	.stats-strip__num { font-size: 38px; }
}


/* ═══════════════════════════════════════════
   PHASE 2b — KATALOG (tabs + skill grid)
   ═══════════════════════════════════════════ */

/* Section head (reusable) */
.section__head { max-width: 760px; margin: 0 auto 60px; text-align: center; }
.section__head--left { text-align: left; margin: 0 0 50px; }

.eyebrow--num::before { display: none; }
.eyebrow__num {
	font-family: var(--display);
	font-size: 16px; font-weight: 700;
	color: var(--accent); letter-spacing: -0.02em;
}

.section__title {
	font-family: var(--display);
	font-size: 36px; line-height: 1.08; letter-spacing: -0.035em;
	font-weight: 700; color: var(--ink); margin-bottom: 18px;
	font-variation-settings: 'opsz' 72;
	text-wrap: balance;
}
@media (min-width: 768px) { .section__title { font-size: 46px; letter-spacing: -0.04em; } }
.section__title em { font-style: italic; font-weight: 600; font-variation-settings: 'opsz' 96; }
.ae-section--dark .section__title { color: var(--ink-light); }
.ae-section--dark .section__title em { color: var(--ink-light); }

.section__lead {
	font-size: 18px; line-height: 1.6;
	color: var(--ink-2); max-width: 640px; margin: 0 auto;
}
.section__head--left .section__lead { margin: 0; }
.ae-section--dark .section__lead { color: var(--ink-light-2); }

/* Catalog tabs */
.catalog__tabs {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px;
	margin-bottom: 48px;
}
.catalog__tab {
	padding: 11px 22px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 14px;
	color: var(--ink-2);
	font-weight: 500;
	transition: all 150ms;
	cursor: pointer;
	font-family: var(--body);
}
.catalog__tab:hover { border-color: var(--ink); color: var(--ink); }
.catalog__tab--active {
	background: var(--ink); color: var(--ink-light); border-color: var(--ink);
}

.catalog__pane {
	display: none;
	animation: fadeIn 250ms ease;
}
.catalog__pane--active { display: block; }
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.catalog__pane-head {
	display: grid; grid-template-columns: 1fr; gap: 32px;
	align-items: center;
	margin-bottom: 40px;
	padding: 32px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 22px;
}
@media (min-width: 900px) {
	.catalog__pane-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; padding: 40px; }
}
.catalog__pane-head-eyebrow {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 14px;
}
.catalog__pane-head-title {
	font-family: var(--display); font-size: 30px;
	font-weight: 700; letter-spacing: -0.03em;
	color: var(--ink); margin-bottom: 14px;
	line-height: 1.15;
}
@media (min-width: 768px) { .catalog__pane-head-title { font-size: 36px; } }
.catalog__pane-head-desc {
	font-size: 16px; line-height: 1.6;
	color: var(--ink-2); margin-bottom: 18px;
}
.catalog__pane-head-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--accent-soft);
	color: var(--accent);
	border-radius: 999px;
	padding: 6px 14px;
	font-family: var(--mono); font-size: 11.5px;
	font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase;
}
.catalog__pane-head-pill::before {
	content: ''; width: 7px; height: 7px;
	background: var(--accent); border-radius: 50%;
}
.catalog__pane-head-photo {
	aspect-ratio: 5 / 4;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bg-deep);
}
.catalog__pane-head-photo img { width: 100%; height: 100%; object-fit: cover; }

.catalog__pane-grid {
	display: grid; grid-template-columns: 1fr;
	gap: 14px;
}
@media (min-width: 700px) { .catalog__pane-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .catalog__pane-grid { grid-template-columns: repeat(3, 1fr); } }

/* Skill card */
.skill {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px 22px 20px;
	display: flex; flex-direction: column;
	position: relative;
	transition: all 200ms ease;
	cursor: pointer;
}
.skill:hover {
	border-color: var(--ink);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(21, 23, 28, 0.16);
}
.skill--hot {
	border-color: var(--accent-line);
	background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 60%);
}
.skill--hot:hover {
	border-color: var(--accent);
	box-shadow: 0 16px 32px -14px rgba(189, 30, 35, 0.24);
}
.skill__icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--bg-soft);
	color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 14px;
	transition: all 200ms;
}
.skill__icon svg { width: 20px; height: 20px; }
.skill:hover .skill__icon { background: var(--ink); color: var(--ink-light); }
.skill--hot .skill__icon { background: var(--accent); color: white; }
.skill--hot:hover .skill__icon { background: var(--ink); color: var(--ink-light); }
.skill__num {
	position: absolute;
	top: 22px; right: 22px;
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.04em;
	font-weight: 600;
}
.skill__hot {
	position: absolute;
	top: 18px; right: 18px;
	background: var(--accent);
	color: white;
	font-family: var(--mono); font-size: 9.5px;
	letter-spacing: 0.08em; text-transform: uppercase;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 999px;
}
.skill__title {
	font-family: var(--display); font-size: 17px;
	font-weight: 700; letter-spacing: -0.02em;
	color: var(--ink); margin-bottom: 8px;
	line-height: 1.25;
	padding-right: 36px;
}
.skill__desc {
	font-size: 13.5px; line-height: 1.55;
	color: var(--ink-2);
	flex: 1;
	margin-bottom: 16px;
}
.skill__tag {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-3); letter-spacing: 0.04em;
	align-self: flex-start;
	padding: 4px 10px;
	background: var(--bg-soft);
	border-radius: 999px;
	font-weight: 600;
	text-transform: uppercase;
}
.skill:hover .skill__tag { background: var(--accent-soft); color: var(--accent); }
.skill--hot .skill__tag { background: rgba(189, 30, 35, 0.10); color: var(--accent); }

.catalog__foot {
	margin-top: 60px;
	text-align: center;
	padding: 32px 28px;
	background: var(--bg-soft);
	border-radius: 18px;
	max-width: 780px; margin-left: auto; margin-right: auto;
}
.catalog__foot-text {
	font-size: 16px; color: var(--ink-2);
	margin-bottom: 22px;
}
.catalog__foot-text strong { color: var(--ink); font-weight: 600; }


/* ═══════════════════════════════════════════
   PHASE 2c — KAKO RADIMO + PAKETI + RAZGOVOR
   ═══════════════════════════════════════════ */

/* ─── KAKO RADIMO ─── */
.how {
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.how__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 56px;
	align-items: stretch;
}
@media (min-width: 1024px) {
	.how__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 72px;
	}
}
.how__photo {
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	background: var(--bg-deep);
	min-height: 100%;
}
@media (max-width: 1023px) {
	.how__photo { aspect-ratio: 4 / 5; }
}
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.how__photo-badge {
	position: absolute;
	top: 24px; left: 24px;
	background: var(--bg-card);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 12px 24px -10px rgba(21, 23, 28, 0.20);
	display: flex; align-items: center; gap: 12px;
	max-width: 250px;
}
.how__photo-badge-icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	background: var(--accent); color: white;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
}
.how__photo-badge-text {
	font-family: var(--display); font-size: 13.5px;
	font-weight: 600; letter-spacing: -0.015em;
	line-height: 1.3; color: var(--ink);
}
.how__photo-badge-text strong { color: var(--accent); font-weight: 700; }
.how__quote {
	position: absolute;
	bottom: 24px; right: 24px;
	background: var(--ink); color: var(--ink-light);
	border-radius: 16px;
	padding: 16px 20px;
	max-width: 270px;
	font-family: var(--display); font-size: 15px;
	font-weight: 500; line-height: 1.4;
	box-shadow: 0 16px 32px -12px rgba(21, 23, 28, 0.34);
}
.how__quote-attrib {
	margin-top: 8px;
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-light-3); letter-spacing: 0.06em;
	text-transform: uppercase; font-weight: 600;
}

.how__steps { display: flex; flex-direction: column; gap: 18px; }
.how__step {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 26px 28px;
	display: grid; grid-template-columns: 56px 1fr;
	gap: 22px;
	align-items: flex-start;
	transition: all 200ms ease;
}
.how__step:hover {
	border-color: var(--ink);
	transform: translateX(4px);
}
.how__step-num {
	width: 50px; height: 50px;
	border-radius: 14px;
	background: var(--ink); color: var(--ink-light);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--display);
	font-size: 22px; font-weight: 800;
	letter-spacing: -0.03em;
}
.how__step--active .how__step-num { background: var(--accent); }
.how__step-title {
	font-family: var(--display); font-size: 22px;
	font-weight: 700; letter-spacing: -0.025em;
	color: var(--ink); margin-bottom: 8px;
	line-height: 1.2;
}
.how__step-desc {
	font-size: 14.5px; line-height: 1.55;
	color: var(--ink-2);
}
.how__step-desc strong { color: var(--ink); font-weight: 600; }
.how__step-check {
	display: inline-flex; align-items: center;
	margin-top: 12px;
	font-family: var(--mono); font-size: 11.5px;
	color: var(--green); font-weight: 700;
	letter-spacing: 0.04em;
}

/* ─── FOMO SECTION ─── */
.fomo {
	background: var(--bg-dark); color: var(--ink-light);
	position: relative; overflow: hidden;
	text-align: center;
}
.fomo::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 20% 25%, rgba(189, 30, 35, 0.18), transparent 50%),
		radial-gradient(circle at 80% 75%, rgba(32, 50, 74, 0.45), transparent 55%);
	pointer-events: none;
}
.fomo > .ae-container { position: relative; z-index: 2; }

.fomo__tag {
	display: inline-block;
	font-family: var(--mono); font-size: 11.5px;
	color: var(--accent-line); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 22px;
	padding: 6px 14px;
	background: rgba(189, 30, 35, 0.10);
	border: 1px solid rgba(252, 165, 165, 0.30);
	border-radius: 999px;
}
.fomo__title {
	font-family: var(--display);
	font-size: 40px; line-height: 1.05; letter-spacing: -0.04em;
	font-weight: 700; margin-bottom: 22px;
	color: var(--ink-light); text-wrap: balance;
}
@media (min-width: 768px) { .fomo__title { font-size: 64px; } }
.fomo__title em {
	font-style: italic; font-weight: 600;
	background: linear-gradient(180deg, transparent 65%, rgba(189, 30, 35, 0.40) 65%, rgba(189, 30, 35, 0.40) 92%, transparent 92%);
	padding: 0 8px;
}
.fomo__lead {
	font-size: 17px; color: var(--ink-light-2);
	max-width: 720px; margin: 0 auto 48px;
	line-height: 1.6;
}

.fomo__counters {
	display: grid; grid-template-columns: 1fr;
	gap: 24px;
	max-width: 1080px; margin: 0 auto 44px;
}
@media (min-width: 800px) { .fomo__counters { grid-template-columns: repeat(3, 1fr); } }

.fomo-counter {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 18px;
	padding: 28px 24px;
	display: flex; flex-direction: column;
	gap: 12px;
	text-align: left;
}
.fomo-counter__num {
	font-family: var(--display);
	font-size: 56px; font-weight: 800;
	letter-spacing: -0.045em; line-height: 1;
	color: var(--accent-line);
}
@media (min-width: 768px) { .fomo-counter__num { font-size: 68px; } }
.fomo-counter__label {
	font-size: 15px; line-height: 1.5;
	color: var(--ink-light);
}
.fomo-counter__source {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-light-3); letter-spacing: 0.04em;
	margin-top: auto;
	padding-top: 8px;
	transition: color 150ms;
}
.fomo-counter__source:hover { color: var(--ink-light-2); }

.fomo__cta {
	background: var(--accent); color: white;
	padding: 16px 32px;
	font-size: 16px;
}
.fomo__cta:hover { background: var(--accent-bright); transform: translateY(-1px); }

/* ─── PAKETI 4-col grid override + custom variant ─── */
.paketi__grid--4 {
	grid-template-columns: 1fr !important;
}
@media (min-width: 720px) {
	.paketi__grid--4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1100px) {
	.paketi__grid--4 { grid-template-columns: repeat(4, 1fr) !important; }
}
.paketi__grid--4 .paket { padding: 32px 26px 26px; }
.paketi__grid--4 .paket__name { font-size: 26px; }
.paketi__grid--4 .paket__one-line { font-size: 14.5px; margin-bottom: 22px; }
.paketi__grid--4 .paket__includes li { font-size: 13.5px; }

.paket--custom {
	background: transparent;
	border: 2px dashed var(--border-2);
}
.paket--custom:hover {
	border-color: var(--ink); border-style: dashed;
}


/* ═══════════════════════════════════════════
   BOOKING / RAZGOVOR PAGE
   ═══════════════════════════════════════════ */

.booking-hero {
	padding: 48px 0 40px;
}
@media (min-width: 1024px) { .booking-hero { padding: 60px 0 50px; } }
.booking-hero__inner {
	max-width: 880px;
}
.booking-hero__title {
	font-family: var(--display);
	font-size: 38px; line-height: 1.05; letter-spacing: -0.04em;
	font-weight: 700; margin-bottom: 22px;
	color: var(--ink); text-wrap: balance;
}
@media (min-width: 768px) { .booking-hero__title { font-size: 56px; } }
.booking-hero__title em { font-style: italic; font-weight: 600; }
.booking-hero__lead {
	font-size: 18.5px; line-height: 1.6;
	color: var(--ink-2);
	max-width: 720px;
	margin-bottom: 36px;
}
.booking-hero__lead strong { color: var(--ink); font-weight: 600; }

.booking-hero__signals {
	display: grid; grid-template-columns: 1fr;
	gap: 16px;
	max-width: 880px;
}
@media (min-width: 700px) { .booking-hero__signals { grid-template-columns: repeat(3, 1fr); } }

.booking-signal {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 18px 20px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 14px;
}
.booking-signal__icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent);
	display: inline-flex; align-items: center; justify-content: center;
}
.booking-signal__icon svg { width: 18px; height: 18px; }
.booking-signal__text {
	display: flex; flex-direction: column;
	gap: 3px;
}
.booking-signal__text strong {
	font-family: var(--display); font-size: 15px;
	font-weight: 700; letter-spacing: -0.015em;
	color: var(--ink); line-height: 1.2;
}
.booking-signal__text span {
	font-size: 13px; color: var(--ink-2);
	line-height: 1.4;
}

/* Calendly embed section */
.booking-embed-section {
	padding: 20px 0 80px;
}
@media (min-width: 1024px) { .booking-embed-section { padding: 28px 0 100px; } }
.booking-embed {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 20px 50px -24px rgba(21, 23, 28, 0.16);
}
.calendly-inline-widget {
	border-radius: 22px;
}

/* ─── PAKETI ─── */
.paketi__grid {
	display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 900px) { .paketi__grid { grid-template-columns: repeat(3, 1fr); } }

.paket {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 22px;
	padding: 36px 32px 32px;
	display: flex; flex-direction: column;
	transition: all 250ms ease;
	position: relative;
}
.paket:hover {
	border-color: var(--ink-4);
	transform: translateY(-3px);
	box-shadow: 0 24px 50px -20px rgba(21, 23, 28, 0.14);
}
.paket--featured {
	background: var(--ink); color: var(--ink-light);
	border-color: var(--ink);
}
.paket--featured::before {
	content: 'NAJČEŠĆI ODABIR';
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	background: var(--accent); color: white;
	padding: 6px 14px; border-radius: 999px;
	font-family: var(--mono); font-size: 10.5px;
	font-weight: 700; letter-spacing: 0.08em;
}
.paket__for {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-3); font-weight: 600;
	margin-bottom: 14px;
}
.paket--featured .paket__for { color: var(--ink-light-3); }
.paket__name {
	font-family: var(--display); font-size: 30px;
	font-weight: 800; letter-spacing: -0.03em;
	color: var(--ink); margin-bottom: 6px;
}
.paket--featured .paket__name { color: var(--ink-light); }
.paket__one-line {
	font-family: var(--display); font-size: 16px;
	color: var(--ink-2); font-weight: 500;
	letter-spacing: -0.015em; margin-bottom: 24px;
	line-height: 1.4;
}
.paket--featured .paket__one-line { color: var(--ink-light-2); }
.paket__divider { height: 1px; background: var(--border); margin-bottom: 22px; }
.paket--featured .paket__divider { background: rgba(255,255,255,0.15); }
.paket__price {
	font-family: var(--display); font-size: 40px;
	font-weight: 800; letter-spacing: -0.04em;
	color: var(--ink); line-height: 1; margin-bottom: 4px;
	display: flex; align-items: baseline; gap: 4px;
}
.paket--featured .paket__price { color: var(--ink-light); }
.paket__price-suffix {
	font-size: 17px; color: var(--ink-3); font-weight: 600;
}
.paket--featured .paket__price-suffix { color: var(--ink-light-3); }
.paket__price-meta {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.06em;
	text-transform: uppercase; margin-bottom: 26px; font-weight: 500;
}
.paket--featured .paket__price-meta { color: var(--ink-light-3); }

.paket__includes-label {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-3); font-weight: 600;
	margin-bottom: 14px;
}
.paket--featured .paket__includes-label { color: var(--ink-light-3); }
.paket__includes {
	list-style: none;
	display: flex; flex-direction: column;
	gap: 12px;
	margin-bottom: 28px;
	padding: 0;
}
.paket__includes li {
	display: flex; gap: 12px;
	font-size: 14px; line-height: 1.5;
	color: var(--ink-2);
	align-items: flex-start;
}
.paket--featured .paket__includes li { color: var(--ink-light-2); }
.paket__includes li::before {
	content: '';
	flex-shrink: 0;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--accent-soft);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BD1E23' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 1px;
}
.paket--featured .paket__includes li::before {
	background-color: rgba(255,255,255,0.10);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFB' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.paket__includes li strong { color: var(--ink); font-weight: 600; }
.paket--featured .paket__includes li strong { color: var(--ink-light); font-weight: 600; }

.paket__cta {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 14px 22px;
	background: transparent; color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 12px;
	font-size: 14.5px; font-weight: 600;
	transition: all 150ms;
	margin-top: auto;
}
.paket__cta:hover { background: var(--ink); color: var(--ink-light); }
.paket--featured .paket__cta {
	background: var(--ink-light); color: var(--ink);
	border-color: var(--ink-light);
}
.paket--featured .paket__cta:hover {
	background: var(--accent); border-color: var(--accent); color: white;
}

.paketi__foot {
	text-align: center;
	margin-top: 40px;
	color: var(--ink-2);
	font-size: 15.5px;
}
.paketi__foot strong {
	color: var(--ink); font-weight: 600;
	border-bottom: 1.5px solid var(--accent);
	padding-bottom: 1px;
}

/* ─── RAZGOVOR ─── */
.razgovor-wrap {
	display: grid; grid-template-columns: 1fr;
	gap: 48px;
	align-items: stretch;
}
@media (min-width: 1024px) {
	.razgovor-wrap {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
		gap: 64px;
		align-items: center;
	}
}

.razgovor__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	overflow: hidden;
	background: var(--bg-deep);
}
.razgovor__photo img { width: 100%; height: 100%; object-fit: cover; }
.razgovor__photo::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(21, 23, 28, 0.30) 100%);
	pointer-events: none;
}

.razgovor__time-bubble {
	position: absolute;
	top: 22px; right: 22px;
	background: var(--accent); color: white;
	border-radius: 20px;
	padding: 16px 18px;
	text-align: center;
	box-shadow: 0 14px 28px -10px rgba(189, 30, 35, 0.42);
	z-index: 2;
}
.razgovor__time-bubble-num {
	font-family: var(--display);
	font-size: 32px; font-weight: 800;
	letter-spacing: -0.04em; line-height: 1;
}
.razgovor__time-bubble-unit {
	font-family: var(--mono); font-size: 9.5px;
	letter-spacing: 0.1em; text-transform: uppercase;
	font-weight: 700; opacity: 0.92; margin-top: 4px;
}

.razgovor__quote-card {
	position: absolute;
	bottom: 22px; left: 22px; right: 22px;
	background: var(--bg-card);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 16px 32px -12px rgba(21, 23, 28, 0.24);
	font-family: var(--display);
	font-size: 14.5px; font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
	z-index: 2;
}
.razgovor__quote-card strong { font-weight: 700; color: var(--ink); }
.razgovor__quote-card small {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	color: var(--ink-3);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	margin-top: 8px;
}

.razgovor__content {
	display: flex; flex-direction: column;
}
.razgovor__heading {
	font-family: var(--display);
	font-size: 32px; line-height: 1.08; letter-spacing: -0.035em;
	font-weight: 700; color: var(--ink);
	margin-bottom: 16px;
	text-wrap: balance;
}
@media (min-width: 768px) { .razgovor__heading { font-size: 40px; } }
.razgovor__heading em { font-style: italic; font-weight: 600; }

.razgovor__intro {
	font-size: 16.5px; line-height: 1.6;
	color: var(--ink-2); margin-bottom: 36px;
	max-width: 540px;
}
.razgovor__intro strong { color: var(--ink); font-weight: 600; }

.razgovor__steps {
	list-style: none;
	display: flex; flex-direction: column;
	gap: 22px;
	margin-bottom: 36px;
	padding: 0;
}
.razgovor__step {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 20px;
	align-items: flex-start;
}
.razgovor__step-num {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--ink); color: var(--ink-light);
	display: inline-flex;
	align-items: center; justify-content: center;
	font-family: var(--display);
	font-size: 16px; font-weight: 800;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}
.razgovor__step--accent .razgovor__step-num {
	background: var(--accent); color: white;
	box-shadow: 0 8px 16px -6px rgba(189, 30, 35, 0.40);
}
.razgovor__step-title {
	font-family: var(--display);
	font-size: 18px; font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink); margin-bottom: 5px;
	line-height: 1.3;
}
.razgovor__step-desc {
	font-size: 14.5px; line-height: 1.55;
	color: var(--ink-2);
}
.razgovor__step-desc strong { color: var(--ink); font-weight: 600; }

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


/* ═══════════════════════════════════════════
   PHASE 2d — O MENI + STVARNE SITUACIJE + FAQ + FINAL CTA
   ═══════════════════════════════════════════ */

/* ─── O MENI ─── */
.about__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 48px;
	align-items: flex-start;
}
@media (min-width: 1024px) {
	.about__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; }
}

.about__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 28px;
	overflow: hidden;
	background: var(--bg-deep);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; }

.about__photo-card {
	position: absolute;
	bottom: 24px; left: 24px;
	background: var(--bg-card);
	border-radius: 18px;
	padding: 18px 20px;
	box-shadow: 0 18px 36px -14px rgba(21, 23, 28, 0.24);
	max-width: 280px;
}
.about__photo-card-tag {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--accent); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 6px;
}
.about__photo-card-name {
	font-family: var(--display); font-size: 18px;
	font-weight: 700; letter-spacing: -0.025em;
	color: var(--ink); line-height: 1.2;
	margin-bottom: 4px;
}
.about__photo-card-role {
	font-size: 13px; color: var(--ink-2); line-height: 1.45;
}

.about__photo-stat {
	position: absolute;
	top: 24px; right: 24px;
	background: var(--accent); color: white;
	border-radius: 18px;
	padding: 14px 18px;
	text-align: center;
	transform: rotate(3deg);
	box-shadow: 0 12px 24px -10px rgba(21, 23, 28, 0.22);
}
.about__photo-stat-num {
	font-family: var(--display); font-size: 28px;
	font-weight: 800; letter-spacing: -0.04em;
	line-height: 1;
}
.about__photo-stat-label {
	font-family: var(--mono); font-size: 9.5px;
	letter-spacing: 0.06em; text-transform: uppercase;
	font-weight: 700; margin-top: 4px;
}

.about__title {
	font-family: var(--display); font-size: 40px;
	font-weight: 700; letter-spacing: -0.04em;
	line-height: 1.05; margin-bottom: 24px;
	color: var(--ink); text-wrap: balance;
}
@media (min-width: 768px) { .about__title { font-size: 50px; } }
.about__title em { font-style: italic; font-weight: 600; }

.about__body {
	font-size: 17px; line-height: 1.65;
	color: var(--ink-2); margin-bottom: 18px;
}
.about__body strong { color: var(--ink); font-weight: 600; }

.about__link {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 12px;
	color: var(--ink); font-weight: 600;
	border-bottom: 1.5px solid var(--ink-3);
	padding-bottom: 2px;
	font-size: 15px;
	transition: all 150ms;
}
.about__link:hover { border-bottom-color: var(--accent); color: var(--accent); }

.about__bento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 32px;
}
.about__bento-cell {
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 18px;
	background: var(--bg-card);
}
.about__bento-cell--dark {
	background: var(--ink); color: var(--ink-light); border-color: var(--ink);
}
.about__bento-cell--span2 { grid-column: span 2; }
.about__bento-num {
	font-family: var(--display); font-size: 28px;
	font-weight: 800; line-height: 1; letter-spacing: -0.035em;
	margin-bottom: 6px;
}
.about__bento-label {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.06em;
	text-transform: uppercase; font-weight: 600;
}
.about__bento-cell--dark .about__bento-label { color: var(--ink-light-3); }
.about__bento-body {
	font-size: 14px; line-height: 1.55;
	color: var(--ink-2); margin-top: 8px;
}
.about__bento-cell--dark .about__bento-body { color: var(--ink-light-2); }
.about__bento-body strong { color: var(--ink); font-weight: 600; }
.about__bento-cell--dark .about__bento-body strong { color: var(--ink-light); }

/* Brand boxes / "Projekti koji rade i dok spavam"
   Tamne kartice (logo-friendly), 2 gore + 1 wide ispod */
.about__brands {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--border);
}
.about__brands-label {
	font-family: var(--mono); font-size: 11.5px;
	color: var(--ink-3); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 20px;
	text-align: center;
}
.ventures-top {
	display: grid; grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
@media (min-width: 700px) { .ventures-top { grid-template-columns: 1fr 1fr; gap: 20px; } }

.brand-box {
	display: flex; flex-direction: column;
	gap: 16px;
	padding: 30px 28px 26px;
	background: var(--ink);
	color: var(--ink-light);
	border: 1px solid var(--ink);
	border-radius: 18px;
	transition: all 220ms ease;
	text-decoration: none;
	min-height: 240px;
	position: relative;
	overflow: hidden;
}
.brand-box::before {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 200px; height: 200px;
	background: radial-gradient(circle at top right, rgba(189, 30, 35, 0.15), transparent 70%);
	pointer-events: none;
	opacity: 0; transition: opacity 250ms;
}
.brand-box:hover {
	border-color: var(--accent);
	transform: translateY(-3px);
	box-shadow: 0 22px 44px -18px rgba(21, 23, 28, 0.30);
}
.brand-box:hover::before { opacity: 1; }

.brand-box--wide {
	min-height: 0;
	padding: 28px 32px 26px;
}
@media (min-width: 700px) {
	.brand-box--wide {
		display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto;
		gap: 32px; align-items: center;
		min-height: 140px;
	}
	.brand-box--wide .brand-box__logo { height: 44px; }
	.brand-box--wide .brand-box__desc { margin: 0; }
	.brand-box--wide .brand-box__visit { margin-top: 0; align-self: center; white-space: nowrap; }
}

.brand-box__logo {
	height: 36px;
	display: flex; align-items: center;
	position: relative; z-index: 2;
}
.brand-box__logo img {
	max-height: 36px;
	max-width: 180px;
	width: auto; height: auto;
	object-fit: contain;
	object-position: left center;
}

.brand-box__desc {
	font-size: 14px; line-height: 1.55;
	color: var(--ink-light-2);
	flex: 1;
	position: relative; z-index: 2;
}

.brand-box__visit {
	font-family: var(--mono); font-size: 11.5px;
	color: var(--ink-light-3); letter-spacing: 0.04em;
	font-weight: 600;
	margin-top: 4px;
	transition: color 150ms;
	position: relative; z-index: 2;
}
.brand-box:hover .brand-box__visit { color: var(--accent-line); }

/* ─── STVARNE SITUACIJE (dark section dynamics) ─── */
.ae-section--dark { background: var(--bg-dark); color: var(--ink-light); position: relative; }
.ae-section--dark::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 12% 24%, rgba(189, 30, 35, 0.10), transparent 50%),
		radial-gradient(circle at 88% 78%, rgba(32, 50, 74, 0.45), transparent 50%);
	pointer-events: none;
}
.ae-section--dark > .ae-container { position: relative; z-index: 2; }

.price__grid {
	display: grid; grid-template-columns: 1fr; gap: 22px;
}
@media (min-width: 900px) { .price__grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
	background: var(--bg-card);
	border-radius: 22px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: all 280ms ease;
}
.price-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 28px 56px -22px rgba(0, 0, 0, 0.40);
}
.price-card__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	background: var(--bg-deep);
}
.price-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.price-card__photo::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45) 100%);
}
.price-card__industry {
	position: absolute; bottom: 16px; left: 16px;
	color: white;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: 0.08em; text-transform: uppercase;
	font-weight: 700;
	z-index: 2;
	display: flex; align-items: center; gap: 8px;
}
.price-card__industry::before {
	content: ''; width: 6px; height: 6px;
	background: var(--accent-line); border-radius: 50%;
}
.price-card__body { padding: 26px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.price-card__problem {
	font-family: var(--display); font-size: 19px;
	line-height: 1.3; letter-spacing: -0.02em; font-weight: 700;
	margin-bottom: 14px; color: var(--ink);
}
.price-card__solution {
	color: var(--ink-2); font-size: 14.5px; line-height: 1.6;
	margin-bottom: 22px;
}
.price-card__solution strong { color: var(--ink); font-weight: 600; }
.price-card__metrics {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px dashed var(--border);
	display: flex; gap: 20px;
}
.price-card__metric-num {
	font-family: var(--display); font-size: 22px;
	font-weight: 800; color: var(--ink); line-height: 1;
	letter-spacing: -0.025em;
}
.price-card__metric-label {
	font-family: var(--mono); font-size: 10px;
	color: var(--ink-3); letter-spacing: 0.04em;
	text-transform: uppercase; margin-top: 5px;
}

/* ─── FAQ ─── */
.faq {
	display: grid; grid-template-columns: 1fr;
	gap: 48px;
}
@media (min-width: 1024px) {
	.faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; align-items: flex-start; }
}
.faq__intro { position: sticky; top: 100px; }

.faq__call {
	margin-top: 28px;
	padding: 22px 24px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
}
.faq__call-title {
	font-family: var(--display); font-size: 17px;
	font-weight: 700; letter-spacing: -0.02em;
	margin-bottom: 8px; color: var(--ink);
}
.faq__call-body {
	font-size: 14px; line-height: 1.5;
	color: var(--ink-2); margin-bottom: 14px;
}

.faq-item {
	border-bottom: 1px solid var(--border);
	padding: 22px 0;
}
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; gap: 18px;
	font-family: var(--display); font-size: 19px;
	font-weight: 600; letter-spacing: -0.02em;
	color: var(--ink); line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon {
	flex-shrink: 0; width: 28px; height: 28px;
	background: var(--bg-soft); color: var(--ink);
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--mono); font-size: 17px; font-weight: 700;
	transition: all 200ms;
	margin-top: 2px;
}
.faq-item[open] .faq-item__icon {
	background: var(--ink); color: white; transform: rotate(45deg);
}
.faq-item__answer {
	margin-top: 14px; margin-left: 46px;
	font-size: 15.5px; line-height: 1.65; color: var(--ink-2);
}
.faq-item__answer strong { color: var(--ink); font-weight: 600; }

/* ─── FINAL CTA ─── */
.final {
	background: var(--bg-dark);
	color: var(--ink-light);
	text-align: center;
	overflow: hidden;
	position: relative;
}
.final__bg {
	position: absolute; inset: 0;
	opacity: 0.20;
	z-index: 1;
}
.final__bg img {
	width: 100%; height: 100%; object-fit: cover;
	filter: grayscale(1) contrast(1.1);
}
.final__bg::after {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 30%, var(--bg-dark) 80%),
		linear-gradient(180deg, var(--bg-dark) 0%, transparent 30%, transparent 70%, var(--bg-dark) 100%);
}
.final__container { position: relative; z-index: 2; }
.final__title {
	font-family: var(--display);
	font-size: 40px; line-height: 1.0; letter-spacing: -0.045em;
	font-weight: 700; margin-bottom: 22px;
	color: var(--ink-light); text-wrap: balance;
}
@media (min-width: 768px) { .final__title { font-size: 64px; } }
.final__title em { font-style: italic; font-weight: 600; }
.final__title-mark {
	display: inline-block;
	background: var(--accent); color: white;
	padding: 0 16px; border-radius: 12px;
	transform: rotate(-1.5deg);
	font-style: normal; font-weight: 700;
}
.final__lead {
	font-size: 18px; color: var(--ink-light-2);
	max-width: 580px; margin: 0 auto 36px;
	line-height: 1.55;
}
.final__ctas {
	display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.final__btn--primary {
	padding: 16px 28px;
	background: var(--accent); color: white;
	border-radius: 12px;
	font-weight: 600; font-size: 15.5px;
	transition: all 150ms;
	display: inline-flex; align-items: center; gap: 8px;
}
.final__btn--primary:hover { background: var(--accent-bright); transform: translateY(-1px); }
.final__btn--secondary {
	padding: 16px 26px;
	background: transparent; color: var(--ink-light);
	border: 1.5px solid rgba(255,255,255,0.30);
	border-radius: 12px;
	font-weight: 600; font-size: 15.5px;
	transition: all 150ms;
}
.final__btn--secondary:hover { background: rgba(255,255,255,0.08); border-color: var(--ink-light); }
.final__foot {
	margin-top: 28px;
	font-family: var(--mono); font-size: 12px;
	color: var(--ink-light-3); letter-spacing: 0.04em;
}

@media (max-width: 767px) {
	.about__title { font-size: 32px; }
	.final__title { font-size: 38px; }
}


/* ═══════════════════════════════════════════
   PHASE 3 — KATEGORIJA LANDING
   (breadcrumb, hero stats, why cards, vjestina detail,
    sample timeline, kombinacije)
   ═══════════════════════════════════════════ */

/* ─── BREADCRUMB ─── */
.breadcrumb {
	padding: 20px 0 0;
	display: flex; align-items: center; gap: 8px;
	font-family: var(--mono); font-size: 12px;
	color: var(--ink-3); letter-spacing: 0.04em;
	flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-3); transition: color 150ms; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--ink); font-weight: 600; }
.breadcrumb i {
	width: 4px; height: 4px;
	background: var(--ink-4); border-radius: 50%;
	display: inline-block;
}

/* ─── HERO STATS (unutar hero left col, za kategoriju) ─── */
.hero__stats {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	padding-top: 26px;
	border-top: 1px solid var(--border);
	max-width: 540px;
	margin-top: 28px;
}
@media (min-width: 600px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.hero__stat-num {
	font-family: var(--display); font-size: 26px;
	font-weight: 800; letter-spacing: -0.035em;
	color: var(--ink); line-height: 1; margin-bottom: 6px;
}
.hero__stat-num small {
	font-size: 0.55em; color: var(--ink-3); font-weight: 600;
}
.hero__stat-label {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-3); letter-spacing: 0.04em;
	text-transform: uppercase; font-weight: 600;
	line-height: 1.3;
}

/* ─── WHY THIS MATTERS (4 industry stat cards) ─── */
.why__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 700px) { .why__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why__grid { grid-template-columns: repeat(4, 1fr); } }

.why-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 30px 26px;
	transition: all 200ms;
}
.why-card:hover {
	border-color: var(--ink);
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -16px rgba(21, 23, 28, 0.14);
}
.why-card__num {
	font-family: var(--display); font-size: 42px;
	font-weight: 800; letter-spacing: -0.04em;
	color: var(--accent); line-height: 1;
	margin-bottom: 12px;
}
.why-card__title {
	font-family: var(--display); font-size: 18px;
	font-weight: 700; letter-spacing: -0.02em;
	color: var(--ink); margin-bottom: 8px;
	line-height: 1.25;
}
.why-card__body {
	font-size: 14px; line-height: 1.55;
	color: var(--ink-2);
}

/* ─── VJEŠTINA (single detailed section, ne .skill iz kataloga) ─── */
.vjestina {
	padding: 64px 0;
	border-bottom: 1px solid var(--border);
}
.vjestina:first-of-type { border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .vjestina { padding: 88px 0; } }

.vjestina__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 40px;
	align-items: flex-start;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 24px;
}
@media (min-width: 1024px) {
	.vjestina__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		gap: 72px;
		padding: 0 36px;
	}
	.vjestina--reverse .vjestina__grid > *:first-child { order: 2; }
	.vjestina--reverse .vjestina__grid > *:last-child { order: 1; }
}

.vjestina__head {
	display: flex; align-items: center; gap: 14px;
	margin-bottom: 22px;
}
.vjestina__num {
	font-family: var(--display);
	font-size: 56px; font-weight: 800;
	letter-spacing: -0.05em;
	color: var(--ink-4); line-height: 1;
}
.vjestina__icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	background: var(--ink); color: var(--ink-light);
	display: inline-flex; align-items: center; justify-content: center;
}
.vjestina__icon svg { width: 24px; height: 24px; }
.vjestina--hot .vjestina__icon { background: var(--accent); }
.vjestina__hot {
	margin-left: auto;
	background: var(--accent); color: white;
	padding: 5px 12px;
	border-radius: 999px;
	font-family: var(--mono); font-size: 10px;
	letter-spacing: 0.1em; text-transform: uppercase;
	font-weight: 700;
}

.vjestina__title {
	font-family: var(--display);
	font-size: 32px; line-height: 1.1; letter-spacing: -0.035em;
	font-weight: 700; color: var(--ink);
	margin-bottom: 18px;
	text-wrap: balance;
}
@media (min-width: 768px) { .vjestina__title { font-size: 38px; } }
.vjestina__lead {
	font-size: 17px; line-height: 1.65;
	color: var(--ink-2);
	margin-bottom: 28px;
}
.vjestina__lead strong { color: var(--ink); font-weight: 600; }

.vjestina__cols {
	display: grid; grid-template-columns: 1fr;
	gap: 22px;
	margin-bottom: 28px;
}
@media (min-width: 600px) { .vjestina__cols { grid-template-columns: 1fr 1fr; } }

.vjestina__col-head {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 12px;
}
.vjestina__list {
	list-style: none;
	display: flex; flex-direction: column;
	gap: 10px;
	padding: 0;
}
.vjestina__list li {
	font-size: 14.5px; line-height: 1.55;
	color: var(--ink-2);
	position: relative;
	padding-left: 28px;
	text-align: left;
}
.vjestina__list li::before {
	content: '';
	position: absolute;
	left: 0; top: 4px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--accent-soft);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BD1E23' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
}
.vjestina__list li strong { color: var(--ink); font-weight: 600; }

.vjestina__tools {
	display: flex; flex-wrap: wrap; gap: 6px;
	align-items: center;
}
.vjestina__tools-label {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-3); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 600;
	margin-right: 4px;
}
.vjestina__tool {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-2);
	background: var(--bg-soft);
	border: 1px solid var(--border);
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
}

.vjestina__side {
	display: flex; flex-direction: column;
	gap: 18px;
}
.vjestina__photo {
	aspect-ratio: 5 / 4;
	border-radius: 18px;
	overflow: hidden;
	background: var(--bg-deep);
}
.vjestina__photo img { width: 100%; height: 100%; object-fit: cover; }

.vjestina__example {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 22px 24px;
	position: relative;
}
.vjestina--hot .vjestina__example {
	background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg-card) 70%);
	border-color: var(--accent-line);
}
.vjestina__example-label {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--mono); font-size: 10.5px;
	color: var(--accent); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 12px;
}
.vjestina__example-label::before {
	content: ''; width: 6px; height: 6px;
	background: var(--accent); border-radius: 50%;
}
.vjestina__example p {
	font-size: 14.5px; line-height: 1.6;
	color: var(--ink-2);
}
.vjestina__example p strong { color: var(--ink); font-weight: 600; }
.vjestina__example p + p { margin-top: 12px; }

/* ─── SAMPLE DAY TIMELINE ─── */
.sample {
	background: var(--bg-soft);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.sample__timeline {
	max-width: 760px; margin: 0 auto;
	position: relative;
}
.sample__timeline::before {
	content: '';
	position: absolute;
	left: 70px; top: 14px; bottom: 14px;
	width: 2px;
	background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 10px);
	opacity: 0.25;
}
@media (max-width: 700px) { .sample__timeline::before { left: 50px; } }

.sample__step {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 24px;
	padding: 18px 0;
	position: relative;
}
@media (max-width: 700px) { .sample__step { grid-template-columns: 70px 1fr; gap: 16px; } }
.sample__time {
	font-family: var(--display);
	font-size: 18px; font-weight: 800;
	color: var(--ink);
	line-height: 1;
	padding-top: 2px;
	text-align: right;
	position: relative;
}
.sample__time::after {
	content: '';
	position: absolute;
	right: -22px; top: 0;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--bg-soft);
	border: 2.5px solid var(--ink);
}
.sample__step--break .sample__time::after,
.sample__step--hot .sample__time::after {
	background: var(--accent); border-color: var(--accent);
}

.sample__content {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 18px 22px;
	transition: all 200ms;
}
.sample__step:hover .sample__content {
	border-color: var(--ink);
	transform: translateX(4px);
}
.sample__title {
	font-family: var(--display); font-size: 17px;
	font-weight: 700; letter-spacing: -0.02em;
	color: var(--ink); margin-bottom: 6px;
	line-height: 1.3;
}
.sample__body {
	font-size: 14px; line-height: 1.55;
	color: var(--ink-2);
}
.sample__body strong { color: var(--ink); font-weight: 600; }

/* ─── KOMBINACIJE (paket suggestions) ─── */
.kombi__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 22px;
}
@media (min-width: 900px) { .kombi__grid { grid-template-columns: repeat(3, 1fr); } }

.kombi-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 32px 30px;
	display: flex; flex-direction: column;
	transition: all 250ms;
	position: relative;
}
.kombi-card:hover {
	border-color: var(--ink-4);
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -18px rgba(21, 23, 28, 0.16);
}
.kombi-card--featured {
	background: var(--ink); color: var(--ink-light);
	border-color: var(--ink);
}
.kombi-card--featured::before {
	content: 'NAJČEŠĆI ODABIR';
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--accent); color: white;
	padding: 5px 14px; border-radius: 999px;
	font-family: var(--mono); font-size: 10.5px;
	font-weight: 700; letter-spacing: 0.08em;
}

.kombi__paket-name {
	font-family: var(--display); font-size: 28px;
	font-weight: 800; letter-spacing: -0.03em;
	color: var(--ink); margin-bottom: 6px;
}
.kombi-card--featured .kombi__paket-name { color: var(--ink-light); }
.kombi__price {
	font-family: var(--mono); font-size: 13px;
	color: var(--ink-3); letter-spacing: 0.04em;
	margin-bottom: 22px;
}
.kombi-card--featured .kombi__price { color: var(--ink-light-3); }
.kombi__divider { height: 1px; background: var(--border); margin-bottom: 20px; }
.kombi-card--featured .kombi__divider { background: rgba(255,255,255,0.15); }

.kombi__suggestion {
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px dashed var(--border);
}
.kombi-card--featured .kombi__suggestion { border-bottom-color: rgba(255,255,255,0.15); }
.kombi__suggestion:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.kombi__sug-label {
	font-family: var(--mono); font-size: 11px;
	color: var(--accent); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 10px;
}
.kombi-card--featured .kombi__sug-label { color: var(--accent-line); }
.kombi__sug-list {
	list-style: none;
	display: flex; flex-direction: column; gap: 8px;
	margin-bottom: 10px;
	padding: 0;
}
.kombi__sug-list li {
	font-size: 14px; line-height: 1.45;
	color: var(--ink-2);
	display: flex; gap: 10px;
	align-items: flex-start;
}
.kombi-card--featured .kombi__sug-list li { color: var(--ink-light-2); }
.kombi__sug-list li strong { color: var(--ink); font-weight: 600; }
.kombi-card--featured .kombi__sug-list li strong { color: var(--ink-light); font-weight: 600; }
.kombi__sug-list li::before {
	content: ''; flex-shrink: 0;
	width: 6px; height: 6px;
	background: var(--accent); border-radius: 50%;
	margin-top: 8px;
}
.kombi-card--featured .kombi__sug-list li::before { background: var(--accent-line); }
.kombi__sug-outcome {
	font-size: 13px; line-height: 1.45;
	color: var(--ink-3); font-style: italic;
	padding-left: 16px;
	border-left: 2px solid var(--border);
}
.kombi-card--featured .kombi__sug-outcome { color: var(--ink-light-3); border-left-color: rgba(255,255,255,0.20); }

.kombi__cta {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 12px 20px;
	background: transparent; color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 11px;
	font-size: 14px; font-weight: 600;
	transition: all 150ms;
	margin-top: 28px;
}
.kombi__cta:hover { background: var(--ink); color: var(--ink-light); }
.kombi-card--featured .kombi__cta {
	background: var(--ink-light); color: var(--ink);
	border-color: var(--ink-light);
}
.kombi-card--featured .kombi__cta:hover {
	background: var(--accent); border-color: var(--accent); color: white;
}

@media (max-width: 767px) {
	.vjestina__num { font-size: 44px; }
	.vjestina__title { font-size: 26px; }
}


/* ═══════════════════════════════════════════
   PHASE 4 — BLOG INDEX + SINGLE POST
   ═══════════════════════════════════════════ */

/* ─── BLOG HERO ─── */
.blog-hero { padding: 48px 0 60px; }
@media (min-width: 1024px) { .blog-hero { padding: 60px 0 80px; } }
.blog-hero__inner { max-width: 900px; }
.blog-hero__title {
	font-family: var(--display);
	font-size: 44px; line-height: 1.0; letter-spacing: -0.045em;
	font-weight: 700; margin-bottom: 24px;
	color: var(--ink); text-wrap: balance;
	font-variation-settings: 'opsz' 96;
}
@media (min-width: 768px) { .blog-hero__title { font-size: 64px; } }
.blog-hero__title em { font-style: italic; font-weight: 600; }
.blog-hero__lead {
	font-size: 19px; line-height: 1.6;
	color: var(--ink-2); max-width: 640px;
	margin-bottom: 32px;
}
.blog-hero__lead strong { color: var(--ink); font-weight: 600; }
.blog-hero__meta {
	display: flex; flex-wrap: wrap; gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	max-width: 640px;
}
.blog-hero__meta-item { display: flex; flex-direction: column; gap: 4px; }
.blog-hero__meta-num {
	font-family: var(--display); font-size: 24px;
	font-weight: 800; letter-spacing: -0.035em;
	color: var(--ink); line-height: 1;
}
.blog-hero__meta-label {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--ink-3); letter-spacing: 0.06em;
	text-transform: uppercase; font-weight: 600;
}

/* ─── FILTERS (sticky) ─── */
.filters {
	padding: 24px 0 32px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	position: sticky; top: 80px;
	z-index: 10;
	backdrop-filter: blur(8px);
}
.filters__inner {
	display: flex; flex-wrap: wrap; gap: 8px;
	align-items: center; justify-content: center;
}
.filter-pill {
	padding: 9px 18px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 13.5px; color: var(--ink-2);
	font-weight: 500;
	transition: all 150ms;
	cursor: pointer;
	font-family: var(--body);
	white-space: nowrap;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill--active {
	background: var(--ink); color: var(--ink-light); border-color: var(--ink);
}
.filter-pill small {
	margin-left: 6px; opacity: 0.6;
	font-family: var(--mono); font-size: 10.5px;
}

/* ─── ARTICLE CARDS (blog index grid) ─── */
.articles { padding: 56px 0 80px; }
.articles__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 720px) { .articles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .articles__grid { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; } }

.article-card {
	background: var(--bg-card);
	border-radius: 18px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: all 250ms;
	border: 1px solid var(--border);
}
.article-card:hover {
	border-color: var(--ink-4);
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -22px rgba(21, 23, 28, 0.18);
}
.article-card__photo {
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--bg-deep);
	position: relative;
}
.article-card__photo img,
.article-card__photo .wp-block-post-featured-image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 500ms;
}
.article-card:hover .article-card__photo img { transform: scale(1.05); }
.article-card__category {
	position: absolute;
	top: 14px; left: 14px;
	background: rgba(255,255,255,0.94);
	backdrop-filter: blur(6px);
	padding: 5px 12px;
	border-radius: 999px;
	font-family: var(--mono); font-size: 10.5px;
	letter-spacing: 0.06em; text-transform: uppercase;
	font-weight: 700; color: var(--ink);
	z-index: 2;
}
.article-card__body {
	padding: 22px 24px 24px;
	display: flex; flex-direction: column;
	flex: 1;
}
.article-card__meta {
	display: flex; gap: 10px; align-items: center;
	margin-bottom: 12px;
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.04em;
}
.article-card__title,
.article-card__title a {
	font-family: var(--display);
	font-size: 21px; line-height: 1.2; letter-spacing: -0.025em;
	font-weight: 700; color: var(--ink);
	margin-bottom: 12px;
	text-wrap: balance;
}
.article-card:hover .article-card__title,
.article-card:hover .article-card__title a { color: var(--accent); }
.article-card__excerpt {
	font-size: 14.5px; line-height: 1.55;
	color: var(--ink-2);
	flex: 1;
	margin-bottom: 18px;
}

/* WP Query Loop integration */
.articles__grid .wp-block-post {
	background: var(--bg-card);
	border-radius: 18px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: all 250ms;
	border: 1px solid var(--border);
}
.articles__grid .wp-block-post:hover {
	border-color: var(--ink-4);
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -22px rgba(21, 23, 28, 0.18);
}
.articles__grid .wp-block-post-featured-image {
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--bg-deep);
	margin: 0;
}
.articles__grid .wp-block-post-featured-image img {
	width: 100%; height: 100%; object-fit: cover;
}
.articles__grid .wp-block-post-title {
	font-family: var(--display);
	font-size: 21px; line-height: 1.2; letter-spacing: -0.025em;
	font-weight: 700; color: var(--ink);
	padding: 0 24px;
	margin: 0 0 12px;
}
.articles__grid .wp-block-post-title a { color: inherit; text-decoration: none; }
.articles__grid .wp-block-post-title a:hover { color: var(--accent); }
.articles__grid .wp-block-post-date,
.articles__grid .wp-block-post-terms {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.04em;
	padding: 22px 24px 0;
	margin: 0;
}
.articles__grid .wp-block-post-excerpt {
	padding: 0 24px 24px;
	font-size: 14.5px; line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
}
.articles__grid .wp-block-post-excerpt__excerpt { margin: 0; }
.articles__grid .wp-block-post-excerpt__more-link {
	display: none;
}

/* ─── PAGINATION ─── */
.wp-block-query-pagination {
	display: flex; justify-content: center; align-items: center;
	gap: 8px;
	margin-top: 64px !important;
	grid-column: 1 / -1;
}
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	width: 42px; height: 42px;
	border-radius: 11px;
	border: 1px solid var(--border);
	background: var(--bg-card);
	color: var(--ink-2);
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--display); font-size: 14px; font-weight: 600;
	transition: all 150ms;
	text-decoration: none;
}
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous { width: auto; padding: 0 18px; }
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
	border-color: var(--ink); color: var(--ink);
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--ink); color: var(--ink-light);
	border-color: var(--ink);
}

/* ─── NEWSLETTER ─── */
.newsletter {
	background: var(--bg-dark); color: var(--ink-light);
	position: relative; overflow: hidden;
}
.newsletter::before {
	content: '';
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 15% 30%, rgba(189, 30, 35, 0.18), transparent 50%),
		radial-gradient(circle at 85% 70%, rgba(32, 50, 74, 0.40), transparent 55%);
	pointer-events: none;
}
.newsletter__inner {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1fr;
	gap: 36px; align-items: center;
}
@media (min-width: 900px) {
	.newsletter__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
}
.newsletter__title {
	font-family: var(--display);
	font-size: 32px; line-height: 1.1; letter-spacing: -0.035em;
	font-weight: 700; color: var(--ink-light);
	margin-bottom: 16px; text-wrap: balance;
}
@media (min-width: 768px) { .newsletter__title { font-size: 40px; } }
.newsletter__title em { font-style: italic; font-weight: 600; }
.newsletter__lead {
	font-size: 16px; line-height: 1.6;
	color: var(--ink-light-2); margin-bottom: 24px;
}
.newsletter__lead strong { color: var(--ink-light); font-weight: 600; }
.newsletter__benefits {
	list-style: none;
	display: flex; flex-direction: column;
	gap: 10px;
	padding: 0;
}
.newsletter__benefits li {
	font-size: 14px; line-height: 1.5;
	color: var(--ink-light-2);
	position: relative; padding-left: 26px;
}
.newsletter__benefits li::before {
	content: '';
	position: absolute;
	left: 0; top: 3px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
	background-size: 10px;
	background-position: center;
	background-repeat: no-repeat;
}
.newsletter__benefits li strong { color: var(--ink-light); font-weight: 600; }
.newsletter__form {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 18px;
	padding: 28px 26px;
	backdrop-filter: blur(8px);
}
.newsletter__form-label {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-light-3); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 14px;
}
.newsletter__input-row {
	display: flex; gap: 10px; flex-wrap: wrap;
}
.newsletter__input {
	flex: 1; min-width: 200px;
	padding: 13px 18px;
	background: var(--bg-card);
	border: 1px solid transparent;
	border-radius: 11px;
	font-family: var(--body); font-size: 14.5px;
	color: var(--ink);
	transition: all 150ms;
}
.newsletter__input::placeholder { color: var(--ink-3); }
.newsletter__input:focus { outline: none; border-color: var(--accent); }
.newsletter__btn {
	padding: 13px 22px;
	background: var(--accent); color: white;
	border-radius: 11px;
	font-weight: 600; font-size: 14.5px;
	transition: all 150ms;
	display: inline-flex; align-items: center; gap: 6px;
	cursor: pointer;
	border: none;
}
.newsletter__btn:hover { background: var(--accent-bright); transform: translateY(-1px); }
.newsletter__foot {
	margin-top: 14px;
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-light-3); letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════
   SINGLE BLOG POST
   ═══════════════════════════════════════════ */

/* Reading progress bar */
.progress-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--bg-soft);
	z-index: 60;
}
.progress-bar__fill {
	height: 100%; width: 0%;
	background: var(--accent);
	transition: width 50ms linear;
}

/* Article header */
.article-header { padding: 48px 0 40px; }
.article-header__inner { max-width: 820px; }
.article-header__meta {
	display: flex; gap: 14px; align-items: center;
	margin-bottom: 24px; flex-wrap: wrap;
}
.article-header__category {
	background: var(--accent-soft);
	color: var(--accent);
	padding: 6px 14px;
	border-radius: 999px;
	font-family: var(--mono); font-size: 11px;
	letter-spacing: 0.08em; text-transform: uppercase;
	font-weight: 700;
	transition: all 150ms;
}
.article-header__category:hover { background: var(--accent); color: white; }
.article-header__meta-item {
	font-family: var(--mono); font-size: 12px;
	color: var(--ink-3); letter-spacing: 0.04em;
	display: flex; align-items: center; gap: 8px;
}
.article-header__meta-item::before {
	content: ''; width: 5px; height: 5px;
	background: var(--ink-4); border-radius: 50%;
}
.article-header__title,
.entry-title {
	font-family: var(--display);
	font-size: 36px; line-height: 1.05; letter-spacing: -0.04em;
	font-weight: 700; margin-bottom: 22px;
	color: var(--ink); text-wrap: balance;
	font-variation-settings: 'opsz' 96;
}
@media (min-width: 768px) { .article-header__title, .entry-title { font-size: 52px; } }
@media (min-width: 1024px) { .article-header__title, .entry-title { font-size: 60px; } }

.article-header__lead {
	font-size: 20px; line-height: 1.55;
	color: var(--ink-2); margin-bottom: 36px;
	border-left: 3px solid var(--accent);
	padding-left: 22px;
}
.article-header__lead strong { color: var(--ink); font-weight: 600; }

.article-header__byline {
	display: flex; align-items: center; gap: 14px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.article-header__byline-avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--ink); color: var(--ink-light);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--display);
	font-size: 18px; font-weight: 700;
	flex-shrink: 0;
}
.article-header__byline-text { flex: 1; }
.article-header__byline-name {
	font-family: var(--display);
	font-size: 16px; font-weight: 700;
	color: var(--ink); letter-spacing: -0.015em;
	margin-bottom: 2px;
}
.article-header__byline-role {
	font-size: 13px; color: var(--ink-2); line-height: 1.4;
}

/* Featured image */
.article-hero-img { margin: 8px 0 56px; }
.article-hero-img__inner {
	aspect-ratio: 21/9;
	border-radius: 20px;
	overflow: hidden;
	background: var(--bg-deep);
}
@media (max-width: 767px) { .article-hero-img__inner { aspect-ratio: 4/3; } }
.article-hero-img__inner img,
.article-hero-img__inner .wp-block-post-featured-image img {
	width: 100%; height: 100%; object-fit: cover;
}

/* Body grid (content + TOC) */
.article-body { padding: 0 0 80px; }
.article-body__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 56px;
}
@media (min-width: 1024px) {
	.article-body__grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 64px; }
}

/* TOC sidebar */
.toc {
	position: sticky; top: 100px;
	align-self: flex-start;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
.toc__label {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}
.toc__list { list-style: none; padding: 0; }
.toc__list li { margin-bottom: 4px; }
.toc__list a {
	display: block;
	padding: 7px 12px;
	font-size: 13px;
	color: var(--ink-3);
	border-radius: 8px;
	transition: all 150ms;
	line-height: 1.4;
	border-left: 2px solid transparent;
	margin-left: -2px;
}
.toc__list a:hover { color: var(--ink); background: var(--bg-soft); }
.toc__list a.is-active {
	color: var(--accent); font-weight: 600;
	border-left-color: var(--accent);
}

/* Article content typography (WP entry-content + .article-content) */
.article-content,
.entry-content {
	max-width: 720px;
}
.article-content > * + *,
.entry-content > * + * { margin-top: 22px; }

.article-content p,
.entry-content p {
	font-size: 17.5px; line-height: 1.75;
	color: var(--ink);
}
.article-content p strong,
.entry-content p strong { font-weight: 600; }
.article-content p em,
.entry-content p em { font-style: italic; }
.article-content p a,
.entry-content p a {
	color: var(--accent);
	border-bottom: 1.5px solid var(--accent-line);
	transition: all 150ms;
}
.article-content p a:hover,
.entry-content p a:hover {
	border-bottom-color: var(--accent);
	background: var(--accent-soft);
}

.article-content h2,
.entry-content h2 {
	font-family: var(--display);
	font-size: 30px; line-height: 1.15; letter-spacing: -0.035em;
	font-weight: 700; color: var(--ink);
	margin-top: 56px; margin-bottom: 18px;
	text-wrap: balance;
	scroll-margin-top: 100px;
}
.article-content h2 + p,
.entry-content h2 + p { margin-top: 0; }
@media (min-width: 768px) {
	.article-content h2,
	.entry-content h2 { font-size: 34px; }
}

.article-content h3,
.entry-content h3 {
	font-family: var(--display);
	font-size: 22px; line-height: 1.25; letter-spacing: -0.025em;
	font-weight: 700; color: var(--ink);
	margin-top: 40px; margin-bottom: 12px;
	scroll-margin-top: 100px;
}
.article-content h3 + p,
.entry-content h3 + p { margin-top: 0; }

.article-content ul,
.article-content ol,
.entry-content ul,
.entry-content ol {
	padding-left: 0;
	list-style: none;
}
.article-content ul li,
.article-content ol li,
.entry-content ul li,
.entry-content ol li {
	font-size: 17px; line-height: 1.7;
	color: var(--ink);
	position: relative;
	padding-left: 30px;
	margin-bottom: 12px;
}
.article-content ul li strong,
.entry-content ul li strong { font-weight: 600; }
.article-content ul li::before,
.entry-content ul li::before {
	content: '';
	position: absolute;
	left: 2px; top: 11px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent);
}
.article-content ol,
.entry-content ol { counter-reset: ol-counter; }
.article-content ol li,
.entry-content ol li { counter-increment: ol-counter; }
.article-content ol li::before,
.entry-content ol li::before {
	content: counter(ol-counter, decimal-leading-zero);
	position: absolute;
	left: 0; top: 1px;
	font-family: var(--mono); font-size: 12px;
	color: var(--accent); font-weight: 700;
	letter-spacing: 0.04em;
}

/* Pull quote */
.article-content blockquote,
.entry-content blockquote {
	margin: 36px 0;
	padding: 28px 32px;
	background: var(--bg-soft);
	border-left: 4px solid var(--accent);
	border-radius: 4px 16px 16px 4px;
	font-family: var(--display);
	font-size: 22px; line-height: 1.4;
	font-weight: 500;
	color: var(--ink);
	font-style: italic;
	letter-spacing: -0.015em;
}
@media (min-width: 768px) {
	.article-content blockquote,
	.entry-content blockquote { font-size: 26px; padding: 32px 38px; }
}

/* Code blocks */
.article-content pre,
.entry-content pre {
	background: var(--bg-dark);
	color: var(--ink-light);
	border-radius: 14px;
	padding: 24px 26px;
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 13.5px; line-height: 1.6;
	margin: 28px 0;
}
.article-content pre code,
.entry-content pre code { color: var(--ink-light); }
.article-content code:not(pre code),
.entry-content code:not(pre code) {
	font-family: var(--mono);
	background: var(--bg-soft);
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 0.88em;
	color: var(--ink);
	border: 1px solid var(--border);
}

/* Callout boxes */
.callout {
	margin: 28px 0;
	padding: 22px 24px;
	border-radius: 14px;
	border: 1px solid var(--border);
	display: flex; gap: 16px;
	align-items: flex-start;
}
.callout--tip { background: var(--green-soft); border-color: rgba(21, 128, 61, 0.20); }
.callout--warn { background: #FEF3C7; border-color: rgba(180, 83, 9, 0.25); }
.callout--note { background: var(--accent-soft); border-color: var(--accent-line); }
.callout__icon {
	flex-shrink: 0;
	width: 32px; height: 32px;
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--display); font-size: 15px;
	font-weight: 800;
}
.callout--tip .callout__icon { background: var(--green); color: white; }
.callout--warn .callout__icon { background: #B45309; color: white; }
.callout--note .callout__icon { background: var(--accent); color: white; }
.callout__body { font-size: 15px; line-height: 1.6; color: var(--ink); }
.callout__body strong { font-weight: 600; }
.callout__title {
	font-family: var(--display);
	font-size: 15px; font-weight: 700;
	margin-bottom: 4px; letter-spacing: -0.015em;
}

/* Inline CTA card */
.inline-cta {
	margin: 40px 0;
	background: var(--ink); color: var(--ink-light);
	border-radius: 18px;
	padding: 28px 30px;
	display: flex; align-items: center; gap: 22px;
	flex-wrap: wrap;
	position: relative; overflow: hidden;
}
.inline-cta::before {
	content: '';
	position: absolute;
	top: -40px; right: -40px;
	width: 160px; height: 160px;
	background: radial-gradient(circle, rgba(189, 30, 35, 0.30), transparent 70%);
	pointer-events: none;
}
.inline-cta__text { flex: 1; min-width: 220px; position: relative; z-index: 2; }
.inline-cta__label {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--accent-line); letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 8px;
}
.inline-cta__title {
	font-family: var(--display);
	font-size: 21px; font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.25;
	margin-bottom: 6px;
	color: var(--ink-light);
}
.inline-cta__desc {
	font-size: 14px; line-height: 1.5;
	color: var(--ink-light-2);
}
.inline-cta__btn {
	padding: 12px 22px;
	background: var(--accent); color: white;
	border-radius: 11px;
	font-weight: 600; font-size: 14px;
	display: inline-flex; align-items: center; gap: 6px;
	transition: all 150ms;
	position: relative; z-index: 2;
	white-space: nowrap;
}
.inline-cta__btn:hover { background: var(--accent-bright); transform: translateY(-1px); }

/* Article tags */
.article-tags {
	display: flex; flex-wrap: wrap; gap: 8px;
	align-items: center;
	margin-bottom: 36px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
}
.article-tags__label {
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 600;
	margin-right: 4px;
}
.article-tags a,
.article-tags__tag {
	font-family: var(--mono); font-size: 11.5px;
	color: var(--ink-2);
	background: var(--bg-soft);
	border: 1px solid var(--border);
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 600;
	transition: all 150ms;
	text-decoration: none;
}
.article-tags a:hover,
.article-tags__tag:hover {
	background: var(--accent-soft);
	color: var(--accent);
	border-color: var(--accent-line);
}

/* Author bio */
.author-bio {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 32px 28px;
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 22px;
	align-items: flex-start;
	max-width: 720px;
}
@media (max-width: 600px) { .author-bio { grid-template-columns: 1fr; gap: 16px; } }
.author-bio__avatar {
	width: 80px; height: 80px;
	border-radius: 50%;
	background: var(--ink); color: var(--ink-light);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--display);
	font-size: 28px; font-weight: 700;
	flex-shrink: 0;
}
.author-bio__name {
	font-family: var(--display);
	font-size: 19px; font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink); margin-bottom: 4px;
}
.author-bio__role {
	font-family: var(--mono); font-size: 11.5px;
	color: var(--ink-3); letter-spacing: 0.06em;
	text-transform: uppercase; font-weight: 600;
	margin-bottom: 14px;
}
.author-bio__body {
	font-size: 14.5px; line-height: 1.6;
	color: var(--ink-2); margin-bottom: 14px;
}
.author-bio__body strong { color: var(--ink); font-weight: 600; }
.author-bio__links {
	display: flex; gap: 14px; flex-wrap: wrap;
}
.author-bio__link {
	font-size: 13.5px; color: var(--ink);
	font-weight: 600;
	border-bottom: 1.5px solid var(--ink-3);
	padding-bottom: 1px;
	transition: all 150ms;
}
.author-bio__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Related */
.related {
	background: var(--bg-soft);
	padding: 72px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.related__head { margin-bottom: 40px; max-width: 720px; }
.related__title {
	font-family: var(--display);
	font-size: 30px; line-height: 1.1; letter-spacing: -0.035em;
	font-weight: 700; color: var(--ink);
	text-wrap: balance;
}
@media (min-width: 768px) { .related__title { font-size: 38px; } }
.related__title em { font-style: italic; font-weight: 600; }
.related__grid {
	display: grid; grid-template-columns: 1fr;
	gap: 22px;
}
@media (min-width: 720px) { .related__grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
	background: var(--bg-card);
	border-radius: 16px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: all 250ms;
	border: 1px solid var(--border);
}
.related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -18px rgba(21, 23, 28, 0.18);
	border-color: var(--ink-4);
}
.related-card__photo {
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--bg-deep);
}
.related-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.related-card__body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.related-card__category {
	font-family: var(--mono); font-size: 10.5px;
	color: var(--accent); letter-spacing: 0.08em;
	text-transform: uppercase; font-weight: 700;
	margin-bottom: 10px;
}
.related-card__title {
	font-family: var(--display);
	font-size: 18px; line-height: 1.25; letter-spacing: -0.02em;
	font-weight: 700; color: var(--ink);
	margin-bottom: 10px;
}
.related-card:hover .related-card__title { color: var(--accent); }
.related-card__meta {
	margin-top: auto;
	font-family: var(--mono); font-size: 11px;
	color: var(--ink-3); letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════
   FIXES (2026-05-14) — header margin, catalog active hover,
   skill hot → green, FOMO stripes, paket alignment, white strip,
   logo marquee, brand wordmark
   ═══════════════════════════════════════════ */

/* WP main element reset — eliminira bijelu traku iznad footera */
main.wp-block-group,
.wp-site-blocks > main {
	padding: 0 !important;
	margin: 0 !important;
}
.wp-site-blocks { padding: 0 !important; }
body { margin: 0; padding-top: 16px; }
@media (min-width: 1024px) { body { padding-top: 16px; } }

/* Catalog tab active hover fix (više nije nečitljivo crno-na-crno) */
.catalog__tab--active:hover,
.catalog__tab--active:focus {
	background: var(--ink) !important;
	color: var(--ink-light) !important;
	border-color: var(--ink) !important;
}

/* Skill HOT — sad zelena umjesto crvene */
.skill--hot {
	border-color: rgba(21, 128, 61, 0.28) !important;
	background: linear-gradient(180deg, var(--green-soft) 0%, var(--bg-card) 60%) !important;
}
.skill--hot:hover {
	border-color: var(--green) !important;
	box-shadow: 0 16px 32px -14px rgba(21, 128, 61, 0.28) !important;
}
.skill__hot {
	background: var(--green) !important;
	color: white !important;
}
.skill--hot .skill__icon {
	background: var(--green) !important;
	color: white !important;
}
.skill--hot:hover .skill__icon {
	background: var(--ink) !important;
	color: var(--ink-light) !important;
}
.skill--hot .skill__tag {
	background: rgba(21, 128, 61, 0.10) !important;
	color: var(--green) !important;
}

/* FOMO — pruge kao na originalnoj aiedukacije.hr (crveni base + dijagonalne pruge) */
.fomo {
	background: var(--accent) !important;
	color: white;
}
.fomo::before {
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 40px,
			rgba(0, 0, 0, 0.06) 40px,
			rgba(0, 0, 0, 0.06) 80px
		) !important;
}
.fomo__tag {
	color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
}
.fomo__title { color: white; }
.fomo__title em {
	background: linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.18) 65%, rgba(0, 0, 0, 0.18) 92%, transparent 92%);
}
.fomo__lead { color: rgba(255, 255, 255, 0.92); }
.fomo-counter {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.20);
}
.fomo-counter__num { color: white; }
.fomo-counter__label { color: rgba(255, 255, 255, 0.92); }
.fomo-counter__source {
	color: rgba(255, 255, 255, 0.70);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.fomo-counter__source:hover { color: white; }
.fomo__cta {
	background: white !important;
	color: var(--accent) !important;
}
.fomo__cta:hover {
	background: var(--ink) !important;
	color: white !important;
}

/* Paket includes alignment — apsolutno pozicioniran checkmark, čvrst lijevi rub */
.paket__includes li {
	display: block !important;
	position: relative;
	padding-left: 30px;
	gap: 0 !important;
}
.paket__includes li::before {
	position: absolute !important;
	left: 0;
	top: 4px;
	margin-top: 0 !important;
}

/* Logo marquee karusel */
.trust {
	padding: 24px 0 !important;
	overflow: hidden;
}
.trust__label-wrap {
	text-align: center;
	margin-bottom: 14px;
}
.logo-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
	mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.logo-marquee__track {
	display: flex;
	align-items: center;
	gap: 56px;
	width: max-content;
	animation: logo-marquee 60s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink-2);
	letter-spacing: -0.015em;
	opacity: 0.70;
	transition: opacity 200ms;
	white-space: nowrap;
	text-decoration: none;
	flex-shrink: 0;
}
.logo-marquee__item:hover { opacity: 1; color: var(--ink); }
.logo-marquee__item img {
	width: 28px; height: 28px;
	object-fit: contain;
	border-radius: 6px;
	flex-shrink: 0;
}
@keyframes logo-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* Sinqra wordmark — Space Grotesk pored logotipa u wide brand boxu */
.brand-box__logo--with-name {
	display: flex !important;
	align-items: center;
	gap: 14px;
}
.brand-box__name-text {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: white;
	line-height: 1;
}

/* Razgovor section — secondary intro paragraph na homepage (jer smo izbacili steps) */
.razgovor__intro--secondary {
	margin-top: -16px;
	color: var(--ink-3);
	font-size: 15px;
}
.razgovor__intro--secondary strong { color: var(--ink); }


/* ═══════════════════════════════════════════
   FIXES round 2 (2026-05-14) — WP margin reset (white strip),
   fire emoji on hot skills, strikethrough humor styling
   ═══════════════════════════════════════════ */

/* WP 24px margin-block-start between wp-site-blocks children — the actual culprit of white strip */
:where(.wp-site-blocks) > *,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > header {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
:where(.is-layout-flow) > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Fire emoji 🔥 prefix on popularno badge */
.skill__hot::before {
	content: '🔥 ';
	margin-right: 2px;
}

/* Strikethrough humor — "maltretirati" u O meni */
.about__body s,
.entry-content s {
	color: var(--ink-3);
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
}

/* Logo marquee — Google favicon API u 28px containeru */
.logo-marquee__item img {
	width: 24px !important;
	height: 24px !important;
}


/* FIX: Blog archive grid — WP renders <ul class="wp-block-post-template"> inside .articles__grid div */
.articles__grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 32px;
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 720px) {
	.articles__grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.articles__grid .wp-block-post-template { grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
}
.articles__grid > .wp-block-post-template > .wp-block-post {
	margin: 0 !important;
}


/* FIX: Force articles section + grid to full container width (override WP 720px content-size) */
.articles,
section.wp-block-group.articles {
	width: 100% !important;
	max-width: none !important;
	padding: 56px 0 80px !important;
}
.articles > .ae-container,
.articles > .wp-block-group.ae-container {
	max-width: var(--container-max) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}
@media (min-width: 1024px) {
	.articles > .ae-container,
	.articles > .wp-block-group.ae-container {
		padding-left: 36px !important;
		padding-right: 36px !important;
	}
}
.articles__grid,
.articles .wp-block-query.articles__grid {
	width: 100% !important;
	max-width: none !important;
}
.articles__grid .wp-block-post-template {
	width: 100% !important;
	max-width: none !important;
}


/* AGGRESSIVE FIX: Blog archive grid — high-specificity overrides
   Problem: WP applies content-size constraint somewhere in the chain.
   Solution: force every parent + post-template to full width. */
body main .wp-block-group.articles,
body main section.articles {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	display: block !important;
}
body main .articles > .wp-block-group.ae-container,
body main .articles > .ae-container {
	max-width: 1280px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
	display: block !important;
}
@media (min-width: 1024px) {
	body main .articles > .wp-block-group.ae-container,
	body main .articles > .ae-container {
		padding-left: 36px !important;
		padding-right: 36px !important;
	}
}
body .articles .wp-block-query.articles__grid {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	display: block !important;
}
body .articles__grid > .wp-block-post-template,
body .articles__grid ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 32px !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
@media (min-width: 720px) {
	body .articles__grid > .wp-block-post-template,
	body .articles__grid ul.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (min-width: 1024px) {
	body .articles__grid > .wp-block-post-template,
	body .articles__grid ul.wp-block-post-template {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 36px 28px !important;
	}
}
body .articles__grid > .wp-block-post-template > li.wp-block-post {
	margin: 0 !important;
	width: 100% !important;
	max-width: none !important;
}


/* Articles section spacing (removed inner .ae-container, articles handles its own padding now) */
section.wp-block-group.articles.alignfull {
	padding: 56px 24px 80px !important;
}
@media (min-width: 1024px) {
	section.wp-block-group.articles.alignfull {
		padding: 80px 36px 100px !important;
	}
}
.articles__grid.alignwide {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
}

/* ═══════════════════════════════════════════════════════
   FluentForms — brand override
   /razgovor/ kontakt forma
   ═══════════════════════════════════════════════════════ */

.booking-embed-section {
	padding: 60px 0 80px;
}

.ff-default,
.ff-default .frm-fluent-form {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
	background: transparent !important;
}

.ff-default .ff-el-group {
	margin-bottom: 18px !important;
}

.ff-default .ff-el-input--label label {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-mute, #6B7280) !important;
	margin-bottom: 6px !important;
}

.ff-default input[type="text"],
.ff-default input[type="email"],
.ff-default input[type="tel"],
.ff-default input[type="number"],
.ff-default select,
.ff-default textarea {
	width: 100% !important;
	padding: 14px 16px !important;
	background: #FFFFFF !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-family: 'DM Sans', sans-serif !important;
	color: var(--ink, #15171C) !important;
	transition: all 0.15s ease !important;
	box-shadow: none !important;
}

.ff-default input[type="text"]:focus,
.ff-default input[type="email"]:focus,
.ff-default input[type="tel"]:focus,
.ff-default select:focus,
.ff-default textarea:focus {
	outline: 2px solid #BD1E23 !important;
	outline-offset: -1px !important;
	border-color: #BD1E23 !important;
}

.ff-default input::placeholder,
.ff-default textarea::placeholder {
	color: #9CA3AF !important;
	opacity: 1 !important;
}

.ff-default textarea {
	min-height: 110px !important;
	resize: vertical !important;
}

/* Submit button — brand red */
.ff-default .ff-btn-submit,
.ff-default button[type="submit"] {
	background: #BD1E23 !important;
	color: #FFFFFF !important;
	border: none !important;
	padding: 14px 28px !important;
	border-radius: 10px !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: all 0.18s ease !important;
	box-shadow: 0 2px 6px rgba(189, 30, 35, 0.18) !important;
	min-width: 160px;
}

.ff-default .ff-btn-submit:hover,
.ff-default button[type="submit"]:hover {
	background: #A01A1F !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(189, 30, 35, 0.25) !important;
}

/* Validation errors */
.ff-default .error,
.ff-default .ff-el-is-error input,
.ff-default .ff-el-is-error select,
.ff-default .ff-el-is-error textarea {
	border-color: #BD1E23 !important;
}

.ff-default .ff_t_c label {
	font-size: 13px !important;
	color: var(--ink-mute, #6B7280) !important;
}

.ff-default .error.text-danger {
	color: #BD1E23 !important;
	font-size: 12px !important;
	margin-top: 4px !important;
	font-family: 'DM Sans', sans-serif !important;
}

/* Success message after submit */
.ff-default .ff-message-success,
.ff_message_success {
	background: #F0FDF4 !important;
	border: 1px solid #15803D !important;
	border-radius: 12px !important;
	padding: 28px !important;
	text-align: center !important;
	color: var(--ink, #15171C) !important;
}

.ff-default .ff-message-success h3,
.ff_message_success h3 {
	font-family: 'Bricolage Grotesque', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
	color: #15803D !important;
}

/* Select arrow handled in nuclear block at bottom of file */

/* ═══════════════════════════════════════════════════════
   Homepage final CTA — embedded form on dark bg
   ═══════════════════════════════════════════════════════ */

.final__form-card {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 36px 32px;
	margin: 32px auto 24px;
	max-width: 560px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
	text-align: left;
	position: relative;
	z-index: 1;
}

.final__form-card .ff-default,
.final__form-card .frm-fluent-form {
	background: transparent !important;
}

.final .final__foot a:hover {
	color: #FFFFFF !important;
}

@media (max-width: 640px) {
	.final__form-card {
		padding: 24px 20px;
		margin: 24px 16px 20px;
	}
}

/* ═══════════════════════════════════════════════════════
   Final CTA — split layout (copy lijevo, forma desno)
   ═══════════════════════════════════════════════════════ */

.final--split {
	padding-top: 96px;
	padding-bottom: 96px;
}

.final__container--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	max-width: 1180px;
}

.final--split .final__title {
	text-align: left !important;
}

.final--split .final__lead {
	text-align: left !important;
	margin-left: 0 !important;
}

.final__copy {
	text-align: left;
}

.final__bullets {
	list-style: none;
	padding: 0;
	margin: 28px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.final__bullets li {
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.5;
}

.final__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: #15803D;
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.final__alt-cta {
	margin-top: 28px;
}

.final__alt-cta a {
	color: rgba(255, 255, 255, 0.65);
	text-decoration: underline;
	font-size: 13.5px;
	transition: color 0.15s;
}

.final__alt-cta a:hover {
	color: #FFFFFF;
}

.final--split .final__form-card {
	margin: 0;
	max-width: 100%;
	width: 100%;
	padding: 32px 28px;
}

@media (max-width: 960px) {
	.final__container--split {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.final--split .final__form-card {
		max-width: 560px;
		margin: 0 auto;
	}
}

/* ═══════════════════════════════════════════════════════
   Skills marquee — full-width auto-scrolling rows
   ═══════════════════════════════════════════════════════ */

.catalog__pane-grid--marquee {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	/* Break out of parent container to full viewport width */
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
}

.skills-marquee {
	overflow: hidden;
	position: relative;
	padding: 10px 0;
	-webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}

.skills-marquee + .skills-marquee {
	margin-top: 8px;
}

.skills-marquee__track {
	display: flex;
	gap: 16px;
	width: max-content;
	will-change: transform;
	padding: 0 8px;
}

.skills-marquee__track > .skill {
	flex: 0 0 340px;
	width: 340px;
	margin: 0;
	min-height: 200px;
}

.skills-marquee--left .skills-marquee__track {
	animation: ae-marquee-left 35s linear infinite;
}

.skills-marquee--right .skills-marquee__track {
	animation: ae-marquee-right 35s linear infinite;
}

/* Track ima 4 copies → 50% pomak = 2 copies. Donja traka kreće iz pozicije gdje viewport vidi copy 2 i 3 — uvijek puno, bez gap-a s lijeve ni desne strane */
@keyframes ae-marquee-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes ae-marquee-right {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.skills-marquee:hover .skills-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.skills-marquee__track {
		animation: none !important;
	}
}

@media (max-width: 640px) {
	.skills-marquee__track > .skill {
		flex: 0 0 280px;
		width: 280px;
		min-height: 180px;
	}
	.skills-marquee--left .skills-marquee__track,
	.skills-marquee--right .skills-marquee__track {
		animation-duration: 28s;
	}
}

/* ═══════════════════════════════════════════════════════
   Pulsiranje zelene ikone u hero kartici
   ═══════════════════════════════════════════════════════ */
.hero__result-head::before {
	animation: ae-pulse-green 1.8s ease-in-out infinite;
}

@keyframes ae-pulse-green {
	0%, 100% {
		box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.25), 0 0 0 0 rgba(21, 128, 61, 0);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 0 5px rgba(21, 128, 61, 0.4), 0 0 0 12px rgba(21, 128, 61, 0);
		transform: scale(1.18);
	}
}

/* ═══════════════════════════════════════════════════════
   Scroll reveal — sekcije ulaze odozdo s fade-up
   ═══════════════════════════════════════════════════════ */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.reveal-on-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ═══════════════════════════════════════════════════════
   Hero orbit — kuglice se kreću po koncentričnim kružnicama
   ═══════════════════════════════════════════════════════ */
.hero { position: relative; overflow: hidden; }
.hero > .ae-container { position: relative; z-index: 2; }

.hero__orbit {
	position: absolute;
	left: -260px;
	top: 50%;
	transform: translateY(-50%);
	width: 820px;
	height: 820px;
	pointer-events: none;
	z-index: 1;
	mask-image: linear-gradient(to right, black 0%, black 55%, transparent 90%);
	-webkit-mask-image: linear-gradient(to right, black 0%, black 55%, transparent 90%);
}

.hero__orbit-ring {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(189, 30, 35, 0.18);
	border-radius: 50%;
}
.hero__orbit-ring--1 { width: 320px; height: 320px; border: 2px solid rgba(189, 30, 35, 0.28); }
.hero__orbit-ring--2 { width: 520px; height: 520px; border: 1.5px solid rgba(189, 30, 35, 0.18); }
.hero__orbit-ring--3 { width: 740px; height: 740px; border: 1px solid rgba(189, 30, 35, 0.10); }

/* Arm = nevidljiv pivot u centru koji rotira, ball stoji na rubu */
.hero__orbit-arm {
	position: absolute;
	top: 50%; left: 50%;
	width: 0; height: 0;
	transform-origin: 0 0;
}
.hero__orbit-arm--1 { animation: ae-orbit-spin 14s linear infinite; }
.hero__orbit-arm--2 { animation: ae-orbit-spin-rev 22s linear infinite; }
.hero__orbit-arm--3 { animation: ae-orbit-spin 32s linear infinite; }
.hero__orbit-arm--4 { animation: ae-orbit-spin-rev 18s linear infinite; }

.hero__orbit-ball {
	position: absolute;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--red, #BD1E23);
	box-shadow: 0 0 22px rgba(189, 30, 35, 0.55),
	            inset -2px -2px 4px rgba(0, 0, 0, 0.25),
	            inset 2px 2px 4px rgba(255, 255, 255, 0.35);
	left: -8px;
	overflow: hidden;
}

/* Highlight spot na kuglici → kad se kuglica "kotrlja" highlight putuje */
.hero__orbit-ball::before {
	content: '';
	position: absolute;
	top: 22%;
	left: 22%;
	width: 28%;
	height: 28%;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	animation: ae-ball-roll 1.2s linear infinite;
	transform-origin: 200% 200%;
}

.hero__orbit-ball--small { width: 12px; height: 12px; left: -6px; opacity: 0.78; }

/* Ball center sits ON the ring path (ring_radius + ball_radius offset) */
.hero__orbit-arm--1 .hero__orbit-ball { top: -168px; }   /* ring 1 r=160 + ball r=8 */
.hero__orbit-arm--2 .hero__orbit-ball { top: -268px; background: rgba(189, 30, 35, 0.78); }
.hero__orbit-arm--3 .hero__orbit-ball { top: -378px; background: rgba(189, 30, 35, 0.6); width: 14px; height: 14px; left: -7px; }
.hero__orbit-arm--4 .hero__orbit-ball { top: -168px; }
.hero__orbit-arm--4 { animation-delay: -7s; }

@keyframes ae-ball-roll {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes ae-orbit-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes ae-orbit-spin-rev {
	from { transform: rotate(0deg); }
	to   { transform: rotate(-360deg); }
}

@media (max-width: 768px) {
	.hero__orbit {
		left: -340px;
		width: 560px;
		height: 560px;
		opacity: 0.55;
	}
	.hero__orbit-ring--1 { width: 220px; height: 220px; }
	.hero__orbit-ring--2 { width: 360px; height: 360px; }
	.hero__orbit-ring--3 { width: 500px; height: 500px; }
	.hero__orbit-arm--1 .hero__orbit-ball { top: -118px; }
	.hero__orbit-arm--2 .hero__orbit-ball { top: -188px; }
	.hero__orbit-arm--3 .hero__orbit-ball { top: -258px; }
	.hero__orbit-arm--4 .hero__orbit-ball { top: -118px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__orbit-arm { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   "Alati koje učimo" — font u DM Sans + powerfuller
   ═══════════════════════════════════════════════════════ */
.trust__label {
	font-family: var(--display) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	color: var(--ink-mute) !important;
}

/* Logo marquee — original sizes restored (per user feedback) */

/* ═══════════════════════════════════════════════════════
   "Vaša djelatnost nije gore" — promocija iz sterilnog boxa
   ═══════════════════════════════════════════════════════ */
.catalog__foot {
	text-align: center;
	padding: 48px 24px;
	margin-top: 48px;
	background: linear-gradient(135deg, rgba(189, 30, 35, 0.04) 0%, rgba(189, 30, 35, 0.08) 100%);
	border-radius: 20px;
	border: 1px solid rgba(189, 30, 35, 0.15);
}

.catalog__foot-heading {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0 0 16px;
	line-height: 1.15;
}

.catalog__foot-mark {
	color: var(--red);
	position: relative;
	display: inline-block;
}

.catalog__foot-mark::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.08em;
	height: 0.18em;
	background: rgba(189, 30, 35, 0.18);
	z-index: -1;
}

.catalog__foot-text {
	font-size: 16px;
	color: var(--ink-mute);
	max-width: 640px;
	margin: 0 auto 20px;
	line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════
   Blurana / prozirna forma u finalnoj CTA sekciji (techy)
   ═══════════════════════════════════════════════════════ */
.final--split .final__form-card {
	background: rgba(255, 255, 255, 0.08) !important;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
	            inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.final--split .final__form-card .ff-default .ff-el-input--label label {
	color: rgba(255, 255, 255, 0.78) !important;
}

.final--split .final__form-card input[type="text"],
.final--split .final__form-card input[type="email"],
.final--split .final__form-card input[type="tel"],
.final--split .final__form-card select,
.final--split .final__form-card textarea {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: #FFFFFF !important;
	backdrop-filter: blur(8px);
}

.final--split .final__form-card input::placeholder,
.final--split .final__form-card textarea::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
}

.final--split .final__form-card input:focus,
.final--split .final__form-card select:focus,
.final--split .final__form-card textarea:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(189, 30, 35, 0.6) !important;
	outline-color: rgba(189, 30, 35, 0.6) !important;
}

.final--split .final__form-card select {
	color: rgba(255, 255, 255, 0.85) !important;
	background-image: none !important;
}

.final--split .final__form-card .ff-btn-submit,
.final--split .final__form-card button[type="submit"] {
	box-shadow: 0 8px 24px rgba(189, 30, 35, 0.35),
	            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════
   Ongoing Partner sekcija
   ═══════════════════════════════════════════════════════ */
.partner {
	background: linear-gradient(135deg, #15171C 0%, #1F2229 100%);
	color: #FAFAFB;
	position: relative;
	overflow: hidden;
	padding-top: 96px;
	padding-bottom: 96px;
}

.partner::before {
	content: '';
	position: absolute;
	right: -200px;
	top: -200px;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(189, 30, 35, 0.18) 0%, transparent 60%);
	pointer-events: none;
}

.partner__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	position: relative;
	z-index: 1;
}

@media (min-width: 960px) {
	.partner__inner { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
}

.partner__badge {
	display: inline-block;
	background: rgba(189, 30, 35, 0.15);
	color: #FFAFB3;
	border: 1px solid rgba(189, 30, 35, 0.4);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 6px;
	margin-bottom: 24px;
}

.partner__title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0 0 20px;
	color: #FFFFFF;
}

.partner__title em {
	font-style: italic;
	color: #BD1E23;
}

.partner__lead {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.55;
	max-width: 480px;
}

.partner__lead em { font-style: italic; color: rgba(255, 255, 255, 0.9); }

.partner__card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 36px 32px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.partner__card-head {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 24px;
}

.partner__features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.partner__features li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.partner__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: #15803D;
	color: #FFFFFF;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

.partner__features strong {
	display: block;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	margin-bottom: 4px;
}

.partner__features p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.5;
}

.partner__cta {
	display: inline-flex;
	align-items: center;
	padding: 14px 24px;
	background: #BD1E23;
	color: #FFFFFF;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 0 8px 20px rgba(189, 30, 35, 0.35);
}

.partner__cta:hover {
	background: #A01A1F;
	transform: translateY(-1px);
	color: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════
   Blog teaser sekcija na naslovnoj
   ═══════════════════════════════════════════════════════ */
.blog-teaser {
	padding-top: 96px;
	padding-bottom: 96px;
}

.blog-teaser__query {
	display: block !important;
}

/* Asymmetric layout: prvi post velik s lijeve strane, ostali manji s desne */
.blog-teaser__query .wp-block-post-template,
.blog-teaser__grid {
	display: grid !important;
	grid-template-columns: 1.55fr 1fr;
	grid-template-rows: minmax(220px, auto) minmax(220px, auto);
	gap: 22px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	list-style: none;
}

/* Prvi (najnoviji) post — span 2 reda u lijevom stupcu */
.blog-teaser__query .wp-block-post:first-child {
	grid-row: 1 / span 2;
	grid-column: 1;
}

.blog-teaser__query .wp-block-post:first-child .blog-teaser__photo img {
	height: 100%;
	min-height: 360px;
}

.blog-teaser__query .wp-block-post:first-child .blog-teaser__post-title {
	font-size: 26px;
	line-height: 1.18;
}

.blog-teaser__query .wp-block-post:first-child .blog-teaser__excerpt {
	font-size: 15.5px;
}

.blog-teaser__query .wp-block-post:first-child::before {
	content: 'NAJNOVIJE';
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--accent, #BD1E23);
	color: #FFFFFF;
	padding: 4px 10px;
	border-radius: 6px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.blog-teaser__query .wp-block-post {
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.25s, box-shadow 0.25s;
	position: relative;
	display: flex;
	flex-direction: column;
}

.blog-teaser__query .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(21, 23, 28, 0.08);
}

.blog-teaser__photo {
	display: block;
	margin: 0 !important;
	overflow: hidden;
}

.blog-teaser__photo img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.blog-teaser__query .wp-block-post:hover .blog-teaser__photo img {
	transform: scale(1.04);
}

@media (max-width: 880px) {
	.blog-teaser__query .wp-block-post-template,
	.blog-teaser__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.blog-teaser__query .wp-block-post:first-child {
		grid-row: auto;
		grid-column: auto;
	}
	.blog-teaser__query .wp-block-post:first-child .blog-teaser__photo img {
		min-height: 200px;
		height: 200px;
	}
}

.blog-teaser__meta {
	padding: 18px 22px 0;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6B7280;
	margin: 0;
}

.blog-teaser__post-title {
	padding: 8px 22px 0;
	margin: 0;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.blog-teaser__post-title a {
	color: #15171C;
	text-decoration: none;
}

.blog-teaser__post-title a:hover {
	color: #BD1E23;
}

.blog-teaser__excerpt {
	padding: 10px 22px 22px;
	margin: 0;
	font-size: 14.5px;
	color: #6B7280;
	line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════
   Select chevron — wrapper-based pseudo chevron (jedan, čist)
   Native arrow killed; chevron drawn on .ff-el-input--content :has(select)
   ═══════════════════════════════════════════════════════ */

/* Kill native select arrow + ALL background-image on select itself */
.fluentform select,
.frm-fluent-form select,
.ff-default select,
form.fluentform select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	padding-right: 44px !important;
}

.fluentform select::-ms-expand,
.frm-fluent-form select::-ms-expand { display: none !important; }

/* Position wrapper relatively, draw chevron with ::after — JS markira selektore klasom .ff-has-select */
.ff-el-input--content.ff-has-select {
	position: relative;
}

.ff-el-input--content.ff-has-select::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	pointer-events: none;
	z-index: 2;
}

/* Options dropdown — readable text */
.ff-default select option,
.fluentform select option {
	background: #FFFFFF !important;
	color: #15171C !important;
	font-family: 'DM Sans', sans-serif !important;
	padding: 8px 12px !important;
}

/* Dark context (final CTA glass form) — bijeli chevron + tamne options */
.final--split .final__form-card .ff-el-input--content.ff-has-select::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.7%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") !important;
}

.final--split .final__form-card select option {
	background: #15171C !important;
	color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════
   Country pages (Hrvatska / Slovenija / Srbija / BiH)
   ═══════════════════════════════════════════════════════ */

.country-hero {
	padding: 80px 0 60px;
	position: relative;
}

.country-hero__inner {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.country-hero__title {
	font-family: var(--display);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 18px 0 24px;
	color: var(--ink);
}

.country-hero__title em {
	font-style: italic;
	color: var(--red);
	font-weight: 700;
}

.country-hero__lead {
	font-size: 19px;
	color: var(--ink-mute);
	line-height: 1.55;
	max-width: 720px;
	margin: 0 auto 40px;
}

.country-hero__signals {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 680px;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.country-hero__signals { grid-template-columns: 1fr; }
}

.country-signal {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px 18px;
	text-align: center;
}

.country-signal__num {
	font-family: var(--display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--red);
	line-height: 1;
	margin-bottom: 6px;
}

.country-signal__label {
	font-size: 12px;
	color: var(--ink-mute);
	line-height: 1.4;
	font-weight: 500;
}

.country-coverage {
	padding: 56px 0;
	background: linear-gradient(180deg, transparent 0%, rgba(189, 30, 35, 0.03) 50%, transparent 100%);
}

.country-coverage__head {
	text-align: center;
	margin-bottom: 28px;
}

.country-coverage__title {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
	margin: 8px 0 0;
}

.country-coverage__cities {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 920px;
	margin: 0 auto;
}

.country-city {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
	transition: all 0.18s;
}

.country-city:hover {
	border-color: var(--red);
	color: var(--red);
}

.country-city--more {
	background: rgba(189, 30, 35, 0.05);
	border-color: rgba(189, 30, 35, 0.25);
	color: var(--red);
	font-style: italic;
}

.country-industries {
	padding-top: 80px;
	padding-bottom: 80px;
}

.country-industries__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: 0 auto;
}

.country-industries__foot {
	text-align: center;
	padding: 48px 24px;
	margin: 48px auto 0;
	background: linear-gradient(135deg, rgba(189, 30, 35, 0.04) 0%, rgba(189, 30, 35, 0.08) 100%);
	border-radius: 20px;
	border: 1px solid rgba(189, 30, 35, 0.15);
	max-width: 720px;
}

.country-industries__foot p {
	font-size: 16px;
	color: var(--ink-mute);
	margin: 0 0 20px;
	line-height: 1.55;
}

.country-cta {
	padding-top: 80px !important;
	padding-bottom: 96px !important;
	background: var(--ink);
	color: var(--ink-light);
}

.country-cta__head {
	text-align: center;
	margin-bottom: 40px;
	max-width: 640px;
}

.country-cta__title {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 12px 0;
	color: #FFFFFF;
}

.country-cta__title em {
	font-style: italic;
	color: var(--red);
}

.country-cta__lead {
	font-size: 17px;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.55;
}

/* Glass effect za formu na dark country CTA — koristi iste stilove kao final--split */
.country-cta .ff-default,
.country-cta .frm-fluent-form {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 16px;
	padding: 32px 28px;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.country-cta .ff-el-input--label label {
	color: rgba(255, 255, 255, 0.78) !important;
}

.country-cta input[type="text"],
.country-cta input[type="email"],
.country-cta input[type="tel"],
.country-cta select,
.country-cta textarea {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: #FFFFFF !important;
}

.country-cta input::placeholder,
.country-cta textarea::placeholder {
	color: rgba(255, 255, 255, 0.45) !important;
}

.country-cta select option {
	background: #15171C !important;
	color: #FFFFFF !important;
}

.country-cta .ff-el-input--content.ff-has-select::after {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%220.7%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* ═══════════════════════════════════════════════════════
   Logo SVG mark — zamjena za "ae" tekstualni mark
   ═══════════════════════════════════════════════════════ */
.ae-logo-mark-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 8px;
	color: var(--red, #BD1E23);
	vertical-align: middle;
}

.ae-logo-mark-svg svg {
	width: 100%;
	height: 100%;
}

/* Stari .ae-logo-mark (tekst "ae") — ako ostane negdje, sakrij */
.ae-logo-mark { display: none !important; }
.ae-footer__brand-mark { display: none !important; }

.ae-footer__brand .ae-logo-mark-svg {
	color: var(--red, #BD1E23);
	width: 26px;
	height: 26px;
}

/* ═══════════════════════════════════════════════════════
   Footer Sinqra partner link + cleanup
   ═══════════════════════════════════════════════════════ */
.ae-footer__sinqra {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	text-decoration: none;
	transition: all 0.2s;
	font-family: 'DM Sans', sans-serif;
}

.ae-footer__sinqra:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateX(2px);
}

.ae-footer__sinqra-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ae-footer__sinqra-name {
	font-family: 'Space Grotesk', 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #FFFFFF;
}

.ae-footer__sinqra-arrow {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-left: 2px;
	transition: transform 0.2s;
}

.ae-footer__sinqra:hover .ae-footer__sinqra-arrow {
	color: #FFFFFF;
	transform: translate(2px, -2px);
}

/* ═══════════════════════════════════════════════════════
   Paketi CTA — spriječi wrap strelice na novi red
   ═══════════════════════════════════════════════════════ */
.paket__cta {
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   Category landing pages
   ═══════════════════════════════════════════════════════ */
.cat-hero {
	padding: 60px 0 40px;
}

.cat-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

@media (min-width: 960px) {
	.cat-hero__inner { grid-template-columns: 1.2fr 1fr; gap: 56px; }
}

.cat-hero__title {
	font-family: var(--display);
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 16px 0 20px;
}

.cat-hero__title em {
	font-style: italic;
	color: var(--red);
}

.cat-hero__lead {
	font-size: 17px;
	color: var(--ink-mute);
	line-height: 1.55;
	margin: 0 0 18px;
}

.cat-hero__pill {
	display: inline-block;
	padding: 6px 14px;
	background: rgba(189, 30, 35, 0.08);
	color: var(--red);
	border: 1px solid rgba(189, 30, 35, 0.18);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}

.cat-hero__photo {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.cat-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-skills {
	padding-top: 60px;
	padding-bottom: 80px;
}

.cat-skills__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	max-width: 1180px;
	margin: 0 auto;
}

.cat-articles {
	background: rgba(189, 30, 35, 0.03);
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

.cat-cross {
	padding: 60px 0 20px;
}

.cat-cross__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	max-width: 720px;
	margin: 24px auto 0;
}

.cat-cross-link {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s;
}

.cat-cross-link:hover {
	border-color: var(--red);
	color: var(--red);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(189, 30, 35, 0.12);
}

/* ═══════════════════════════════════════════════════════
   Programatske stranice — 49 industrija × use-case
   ═══════════════════════════════════════════════════════ */

.prog-page {
	background: var(--off-white, #FAFAFB);
}

.prog-hero {
	padding: 56px 0 56px;
}

.prog-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
}

@media (min-width: 960px) {
	.prog-hero__inner { grid-template-columns: 1.2fr 1fr; gap: 56px; }
}

.prog-hero__title {
	font-family: var(--display);
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 14px 0 18px;
	color: var(--ink);
}

.prog-hero__lead {
	font-size: 17px;
	color: var(--ink-mute);
	line-height: 1.55;
	margin: 0 0 26px;
}

.prog-hero__photo {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 20px 50px rgba(21, 23, 28, 0.15);
}

.prog-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.prog-section {
	padding: 56px 0;
}

.prog-section--soft {
	background: rgba(189, 30, 35, 0.025);
}

.prog-section--example {
	background: var(--ink);
	color: var(--ink-light);
}

.prog-section--example h2,
.prog-section--example p {
	color: #FFFFFF;
}

.prog-section h2 {
	font-family: var(--display);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
	color: var(--ink);
}

.prog-section--example h2 { color: #FFFFFF; }

.prog-section p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink);
	margin: 0 0 18px;
}

.prog-section--example p { color: rgba(255, 255, 255, 0.85); }

.prog-tools {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
}

.prog-tools li {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px 20px;
	font-size: 15.5px;
	line-height: 1.5;
}

.prog-tools strong {
	display: inline-block;
	color: var(--red);
	font-weight: 700;
	margin-right: 6px;
}

.prog-setup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	max-width: 560px;
}

@media (max-width: 560px) {
	.prog-setup { grid-template-columns: 1fr; }
}

.prog-setup__item {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px 22px;
}

.prog-setup__label {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 6px;
}

.prog-setup__value {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 700;
	color: var(--red);
	letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════
   WP post-content full width override
   theme.json contentSize ne smije ograničavati naše page-ove
   ═══════════════════════════════════════════════════════ */
.wp-block-post-content,
.entry-content {
	max-width: none !important;
	width: 100%;
}

.wp-block-post-content > *,
.entry-content > * {
	max-width: none !important;
}

/* Naš ae-container i dalje radi svoju širinu unutar full-width content-a */
.wp-block-post-content .ae-container,
.entry-content .ae-container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-content .ae-container--narrow,
.entry-content .ae-container--narrow {
	max-width: var(--container-narrow);
}

.wp-block-post-content .ae-container--reading,
.entry-content .ae-container--reading {
	max-width: var(--container-reading);
}

/* Full-width sekcije (dark example) trebaju full bleed */
.wp-block-post-content > .prog-page > section,
.entry-content > .prog-page > section,
.wp-block-post-content > section,
.entry-content > section {
	width: 100%;
	max-width: 100%;
}

/* ═══════════════════════════════════════════════════════
   Programatske stranice v2 — rich layout
   ═══════════════════════════════════════════════════════ */

.prog-section__title {
	font-family: var(--display);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0 0 12px;
	color: var(--ink);
}

.prog-section__title em {
	font-style: italic;
	color: var(--red);
}

.prog-section__lead {
	font-size: 17px;
	color: var(--ink-mute);
	line-height: 1.55;
	max-width: 640px;
	margin: 0;
}

/* === PAIN POINTS — 4 card grid s big stat brojkama === */
.prog-pain {
	padding: 60px 0;
}

.prog-pain__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 40px;
}

.prog-pain__card {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 24px 22px;
	transition: all 0.2s;
}

.prog-pain__card:hover {
	border-color: var(--red);
	box-shadow: 0 14px 30px rgba(189, 30, 35, 0.1);
	transform: translateY(-2px);
}

.prog-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(189, 30, 35, 0.08);
	color: var(--red);
	border-radius: 10px;
	margin-bottom: 14px;
}

.prog-pain__stat {
	font-family: var(--display);
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--red);
	line-height: 1;
	margin-bottom: 4px;
}

.prog-pain__stat-sm {
	font-size: 14px;
	color: var(--ink-mute);
	font-weight: 500;
	margin-left: 6px;
}

.prog-pain__title {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	margin: 12px 0 6px;
	letter-spacing: -0.01em;
}

.prog-pain__detail {
	font-size: 14px;
	color: var(--ink-mute);
	line-height: 1.5;
}

/* === SOLUTION — 3-step process s connectorima === */
.prog-solution {
	padding: 60px 0;
	background: linear-gradient(180deg, transparent 0%, rgba(189, 30, 35, 0.025) 100%);
}

.prog-steps {
	display: grid;
	gap: 24px;
	max-width: 920px;
	margin: 40px auto 0;
	counter-reset: stepCounter;
}

.prog-step {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 22px;
	align-items: start;
	position: relative;
}

.prog-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 56px;
	left: 28px;
	bottom: -24px;
	width: 2px;
	background: linear-gradient(180deg, rgba(189, 30, 35, 0.4) 0%, rgba(189, 30, 35, 0.05) 100%);
}

.prog-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--red);
	color: #FFFFFF;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
	z-index: 1;
	box-shadow: 0 8px 20px rgba(189, 30, 35, 0.35);
}

.prog-step__body {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 22px 26px;
}

.prog-step__body .prog-icon { margin-bottom: 8px; }

.prog-step__title {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin: 6px 0 8px;
	letter-spacing: -0.01em;
}

.prog-step__detail {
	font-size: 15.5px;
	color: var(--ink-mute);
	line-height: 1.6;
	margin: 0;
}

/* === EXAMPLE — Before/After dashboard card === */
.prog-example {
	padding: 60px 0;
	background: var(--ink);
	color: var(--ink-light);
}

.prog-example .prog-section__title { color: #FFFFFF; }
.prog-example .ae-eyebrow { color: rgba(255, 255, 255, 0.6); }

.prog-ex__card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	padding: 32px;
	margin-top: 36px;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.prog-ex__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
	margin-bottom: 32px;
}

@media (max-width: 720px) {
	.prog-ex__row { grid-template-columns: 1fr; }
	.prog-ex__arrow { transform: rotate(90deg); justify-self: center; }
}

.prog-ex__col {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	padding: 22px 24px;
}

.prog-ex__col--before {
	border-left: 3px solid rgba(189, 30, 35, 0.6);
}

.prog-ex__col--after {
	border-left: 3px solid #15803D;
}

.prog-ex__col-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 8px;
}

.prog-ex__col p {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

.prog-ex__arrow {
	color: var(--red);
	font-size: 28px;
	font-weight: 700;
}

.prog-ex__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.prog-ex__metric {
	text-align: center;
}

.prog-ex__metric-num {
	font-family: var(--display);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--red);
	line-height: 1;
	margin-bottom: 6px;
}

.prog-ex__metric-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	font-weight: 500;
}

/* === TOOLS — icon cards (not list) === */
.prog-tools-section {
	padding: 60px 0;
}

.prog-tools__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 36px;
}

.prog-tool {
	background: #FFFFFF;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px 22px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: all 0.2s;
}

.prog-tool:hover {
	border-color: var(--red);
	box-shadow: 0 12px 24px rgba(189, 30, 35, 0.08);
	transform: translateY(-2px);
}

.prog-tool .prog-icon {
	margin-bottom: 0;
	flex-shrink: 0;
}

.prog-tool__name {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 4px;
}

.prog-tool__desc {
	font-size: 14.5px;
	color: var(--ink-mute);
	line-height: 1.5;
}

/* === SETUP procjena === */
.prog-setup-section {
	padding: 60px 0;
	background: rgba(189, 30, 35, 0.025);
}

/* === FAQ === */
.prog-faq {
	padding: 60px 0;
}

.prog-faq .section__head { margin-bottom: 32px; }
/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES — appended 2026-05-16
   Targeti <=768px (tablet portrait + phone), <=480px (small phone)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* ─── Header — kompaktnije, ne sakrij CTA ali skrati ─── */
	.ae-header__inner {
		padding: 12px 16px !important;
		gap: 12px;
	}
	.ae-logo {
		font-size: 14px !important;
		gap: 6px !important;
	}
	.ae-logo-mark-svg {
		width: 24px !important;
		height: 24px !important;
		margin-right: 4px !important;
	}
	.ae-nav { display: none !important; }
	.ae-header__cta {
		padding: 8px 14px !important;
		font-size: 12px !important;
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* ─── HERO — pretitle, title, subtitle fix-evi ─── */
	.hero {
		padding-top: 32px !important;
		padding-bottom: 40px !important;
	}
	.hero__grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.hero__pretitle--regions {
		flex-wrap: wrap !important;
		font-size: 11px !important;
		gap: 6px !important;
		justify-content: flex-start;
	}
	.hero__pretitle--regions span { white-space: nowrap; }
	.hero__pretitle--regions i {
		width: 4px;
		height: 4px;
	}
	.hero__title {
		font-size: clamp(32px, 9vw, 44px) !important;
		line-height: 1.05 !important;
		word-break: normal;
		hyphens: none;
	}
	.hero__subtitle {
		font-size: 15px !important;
		line-height: 1.55 !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	.hero__subtitle strong {
		display: inline;
		word-break: normal;
	}
	.hero__ctas {
		flex-direction: column !important;
		gap: 10px !important;
		align-items: stretch !important;
	}
	.hero__ctas .ae-btn {
		justify-content: center;
		width: 100%;
	}

	/* Hero visual — sakri komplicirane absolute kartice na mobilu, prikaži samo fotku */
	.hero__visual {
		position: relative;
		max-width: 320px;
		margin: 0 auto;
		min-height: auto !important;
	}
	.hero__photo {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4/5;
		max-width: 320px;
		margin: 0 auto;
	}
	.hero__sticker {
		position: absolute !important;
		top: 12px !important;
		left: 12px !important;
		font-size: 11px !important;
		padding: 5px 10px !important;
	}
	.hero__chat,
	.hero__result {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 16px !important;
		transform: none !important;
	}
	.hero__dots { display: none !important; }

	/* Hero orbit — smanji + manje prominentno na mobilu */
	.hero__orbit {
		left: -380px !important;
		width: 520px !important;
		height: 520px !important;
		opacity: 0.4 !important;
	}

	/* ─── Stats strip — 2 kolone na mobilu (umjesto 4) ─── */
	.stats-strip__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}
	.stats-strip__item {
		padding: 16px 14px !important;
	}
	.stats-strip__num {
		font-size: 28px !important;
	}

	/* ─── Catalog tabs — prikaži kao horizontal scrollable ─── */
	.catalog__tabs {
		flex-wrap: wrap !important;
		justify-content: center;
		gap: 6px !important;
	}
	.catalog__tab {
		font-size: 12px !important;
		padding: 8px 14px !important;
	}

	/* Katalog header */
	.catalog__pane-head {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		text-align: center;
	}
	.catalog__pane-head-photo {
		max-width: 280px;
		margin: 0 auto;
	}
	.catalog__pane-head-title {
		font-size: 24px !important;
	}

	/* ─── Skills cards (marquee) — manje na mobilu ─── */
	.skills-marquee__track > .skill {
		flex: 0 0 280px !important;
		width: 280px !important;
		min-height: 170px !important;
	}
	.skill {
		padding: 18px 18px !important;
	}
	.skill__title {
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
	.skill__desc {
		font-size: 13px !important;
	}

	/* ─── 4 koraka section ─── */
	.how__grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.how__photo {
		aspect-ratio: 4 / 3 !important;
		min-height: auto !important;
	}
	.how__step {
		gap: 14px !important;
	}
	.how__step-num {
		font-size: 40px !important;
	}
	.how__step-title {
		font-size: 18px !important;
	}
	.how__step-desc {
		font-size: 14px !important;
	}

	/* ─── FOMO ─── */
	.fomo__title {
		font-size: clamp(28px, 7vw, 40px) !important;
	}
	.fomo__lead {
		font-size: 15px !important;
	}
	.fomo__counters {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.fomo-counter {
		padding: 22px 20px !important;
	}
	.fomo-counter__num {
		font-size: 40px !important;
	}

	/* ─── Paketi — 1 stupac ─── */
	.paketi__grid,
	.paketi__grid--4 {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
	.paket {
		padding: 26px 22px !important;
	}
	.paket__name {
		font-size: 24px !important;
	}

	/* ─── Partner section ─── */
	.partner__inner {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.partner__title {
		font-size: clamp(26px, 7vw, 36px) !important;
	}
	.partner__card {
		padding: 24px 22px !important;
	}

	/* ─── O meni ─── */
	.about__grid {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.about__photo {
		max-width: 360px;
		margin: 0 auto;
	}
	.about__title {
		font-size: clamp(26px, 7vw, 38px) !important;
	}
	.about__brands {
		grid-template-columns: 1fr !important;
	}
	.ventures-top {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.brand-box {
		padding: 22px 20px !important;
	}

	/* ─── FAQ ─── */
	.faq {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.faq-item summary {
		font-size: 15px !important;
		padding: 14px 16px !important;
	}
	.faq__call {
		padding: 22px !important;
	}

	/* ─── Blog teaser — 1 stupac ─── */
	.blog-teaser__query .wp-block-post-template,
	.blog-teaser__grid {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		gap: 16px !important;
		padding: 0 16px !important;
	}
	.blog-teaser__query .wp-block-post:first-child {
		grid-row: auto !important;
		grid-column: auto !important;
	}
	.blog-teaser__query .wp-block-post:first-child .blog-teaser__photo img {
		min-height: 200px !important;
		height: 200px !important;
	}

	/* ─── Final CTA ─── */
	.final__container--split {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
	}
	.final__title {
		font-size: clamp(32px, 9vw, 48px) !important;
	}
	.final--split .final__form-card {
		max-width: 100% !important;
		margin: 0 auto !important;
		padding: 24px 20px !important;
	}

	/* ─── Footer ─── */
	.ae-footer__top {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.ae-footer__cols {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
	}
	.ae-footer__bottom {
		flex-direction: column !important;
		gap: 8px !important;
		text-align: center;
	}

	/* ─── Programatske stranice ─── */
	.prog-hero__inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.prog-hero__title {
		font-size: clamp(26px, 7vw, 36px) !important;
	}
	.prog-pain__grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}
	.prog-pain__card {
		padding: 18px 16px !important;
	}
	.prog-pain__stat {
		font-size: 28px !important;
	}
	.prog-step {
		grid-template-columns: 44px 1fr !important;
		gap: 14px !important;
	}
	.prog-step__num {
		width: 44px !important;
		height: 44px !important;
		font-size: 18px !important;
	}
	.prog-step:not(:last-child)::after {
		left: 22px !important;
		top: 44px !important;
	}
	.prog-step__body {
		padding: 18px 18px !important;
	}
	.prog-ex__row {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.prog-ex__arrow {
		transform: rotate(90deg) !important;
		justify-self: center !important;
	}
	.prog-ex__metrics {
		grid-template-columns: 1fr 1fr !important;
		gap: 12px !important;
	}
	.prog-tools__grid {
		grid-template-columns: 1fr !important;
	}

	/* ─── Country pages ─── */
	.country-hero__title {
		font-size: clamp(32px, 9vw, 52px) !important;
	}
	.country-hero__signals {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.country-industries__grid {
		grid-template-columns: 1fr !important;
	}

	/* ─── Category pages ─── */
	.cat-hero__inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.cat-hero__title {
		font-size: clamp(26px, 7vw, 40px) !important;
	}
	.cat-skills__grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	/* ─── Generic kontainer padding ─── */
	.ae-container {
		padding: 0 18px !important;
	}
	.section__title {
		font-size: clamp(26px, 7vw, 38px) !important;
	}
	.section__lead {
		font-size: 15px !important;
	}
}

/* === Extra small phones <= 480px === */
@media (max-width: 480px) {
	.ae-header__cta {
		font-size: 11px !important;
		padding: 7px 11px !important;
	}
	.ae-logo { font-size: 13px !important; }
	.hero__title {
		font-size: clamp(28px, 9vw, 36px) !important;
	}
	.hero__title-mark {
		padding: 0 8px !important;
	}
	.stats-strip__num {
		font-size: 24px !important;
	}
	.prog-pain__grid {
		grid-template-columns: 1fr !important;
	}
}
/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIXES v2 — FAQ sticky bug + karuseli (koraci, paketi, projekti, blog)
   ═══════════════════════════════════════════════════════════════════════════ */

/* === FAQ — ukloni sticky na mobilnom (box ne smije ostati gore dok pitanja prolaze ispod) === */
@media (max-width: 1023px) {
	.faq__intro {
		position: static !important;
		top: auto !important;
	}
}

/* === KARUSELI — mobile only === */
@media (max-width: 768px) {
	.ae-carousel-wrap {
		position: relative;
		overflow: visible;
	}

	.ae-carousel-track {
		display: flex !important;
		gap: 14px !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding: 4px 16px 16px !important;
		margin: 0 -16px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		max-width: none !important;
	}

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

	.ae-carousel-track > * {
		flex: 0 0 calc(100vw - 60px) !important;
		max-width: calc(100vw - 60px) !important;
		min-width: 0 !important;
		scroll-snap-align: center;
		margin: 0 !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}

	/* First-child override za blog-teaser (najnoviji je veliki) */
	.ae-carousel-track > *:first-child {
		grid-row: auto !important;
		grid-column: auto !important;
	}

	.ae-carousel-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-top: 18px;
		padding: 0 16px;
	}

	.ae-carousel-arrow {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #FFFFFF;
		border: 1.5px solid var(--line, #E5E7EB);
		color: var(--ink, #15171C);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-weight: 600;
		transition: all 0.18s;
		padding: 0;
		flex-shrink: 0;
		font-family: inherit;
	}

	.ae-carousel-arrow:active,
	.ae-carousel-arrow:hover {
		background: var(--red, #BD1E23);
		color: #FFFFFF;
		border-color: var(--red, #BD1E23);
	}

	.ae-carousel-arrow:disabled {
		opacity: 0.35;
		cursor: not-allowed;
	}

	.ae-carousel-dots {
		display: flex;
		gap: 7px;
		align-items: center;
	}

	.ae-carousel-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--ink-mute, #6B7280);
		opacity: 0.3;
		cursor: pointer;
		transition: all 0.2s;
		border: none;
		padding: 0;
		flex-shrink: 0;
	}

	.ae-carousel-dot.is-active {
		opacity: 1;
		background: var(--red, #BD1E23);
		transform: scale(1.4);
	}

	/* === KORACI karusel u dark/sokim layout === */
	.how__step.ae-carousel-track-item {
		background: #FFFFFF;
		border-radius: 14px;
		padding: 22px 22px !important;
		border: 1px solid var(--line);
	}

	/* === PROJEKTI (about__brands) === */
	.about__brands.ae-carousel-wrap .ae-carousel-track {
		padding-left: 16px !important;
	}
	.brand-box {
		margin: 0 !important;
	}

	/* Blog teaser — karusel layout override */
	.blog-teaser__query .wp-block-query.ae-carousel-wrap {
		display: block !important;
	}
}
/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIXES v3 — fix-evi karusela koji nisu radili + about brands grid
   ═══════════════════════════════════════════════════════════════════════════ */

/* === About brands — 3 identične ćelije na desktop === */
.about__brands--grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
	margin-top: 16px;
}

@media (max-width: 960px) {
	.about__brands--grid3 {
		grid-template-columns: 1fr 1fr;
	}
}

/* Sinqra brand-box više nije wide — sad je standardna celija */
.about__brands--grid3 .brand-box {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.about__brands--grid3 .brand-box__desc {
	flex: 1;
}

/* === KARUSEL — robusni override (flex-direction: row + nowrap) === */
@media (max-width: 768px) {

	.ae-carousel-wrap {
		position: relative;
		overflow: visible;
		padding-top: 14px; /* dovoljno mjesta za paketi badge overflow */
	}

	.ae-carousel-track {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 14px !important;
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		grid-auto-flow: column !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		padding: 14px 16px 16px !important;
		margin: 0 -16px !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		max-width: none !important;
		width: auto !important;
		align-items: stretch;
	}

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

	.ae-carousel-track > * {
		flex: 0 0 calc(100vw - 60px) !important;
		max-width: calc(100vw - 60px) !important;
		min-width: 0 !important;
		width: calc(100vw - 60px) !important;
		scroll-snap-align: center;
		margin: 0 !important;
		grid-column: auto !important;
		grid-row: auto !important;
		display: block;
	}

	/* === Specific override za WP blog post template (ul + li) === */
	.blog-teaser__query .wp-block-post-template.ae-carousel-track {
		display: flex !important;
		list-style: none;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.blog-teaser__query .wp-block-post-template.ae-carousel-track .wp-block-post {
		flex: 0 0 calc(100vw - 60px) !important;
		max-width: calc(100vw - 60px) !important;
		width: calc(100vw - 60px) !important;
		display: flex !important;
		flex-direction: column;
		background: #FFFFFF;
		border: 1px solid var(--line);
		border-radius: 16px;
		overflow: hidden;
	}

	/* === HOW STEPS — override original column flex === */
	.how__steps.ae-carousel-track {
		display: flex !important;
		flex-direction: row !important;
	}

	.how__steps.ae-carousel-track .how__step {
		flex: 0 0 calc(100vw - 60px) !important;
		max-width: calc(100vw - 60px) !important;
		width: calc(100vw - 60px) !important;
		background: #FFFFFF;
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 22px !important;
		display: grid;
		grid-template-columns: 50px 1fr;
		gap: 14px;
		align-items: start;
	}

	/* === PAKETI — popularni badge ne smije biti clipped === */
	.paketi__grid.ae-carousel-track {
		padding-top: 22px !important;
		overflow-y: visible !important;
	}

	.paket {
		overflow: visible !important;
		position: relative;
	}

	.paket--featured {
		margin-top: 8px;
	}

	/* === ABOUT BRANDS karusel === */
	.about__brands--grid3.ae-carousel-track {
		display: flex !important;
		flex-direction: row !important;
	}

	.about__brands--grid3.ae-carousel-track .brand-box {
		flex: 0 0 calc(100vw - 60px) !important;
		max-width: calc(100vw - 60px) !important;
		width: calc(100vw - 60px) !important;
	}

	/* Nav stil — bolji visual */
	.ae-carousel-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-top: 20px;
		padding: 0 16px;
	}

	.ae-carousel-arrow {
		width: 42px;
		height: 42px;
		border-radius: 50%;
		background: #FFFFFF;
		border: 1.5px solid var(--line, #E5E7EB);
		color: var(--ink, #15171C);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		font-weight: 700;
		transition: all 0.18s;
		padding: 0;
		flex-shrink: 0;
		line-height: 1;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.ae-carousel-arrow:active,
	.ae-carousel-arrow:hover:not(:disabled) {
		background: var(--red, #BD1E23);
		color: #FFFFFF;
		border-color: var(--red, #BD1E23);
	}

	.ae-carousel-arrow:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	.ae-carousel-dots {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.ae-carousel-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--ink-mute, #6B7280);
		opacity: 0.3;
		cursor: pointer;
		transition: all 0.2s;
		border: none;
		padding: 0;
		flex-shrink: 0;
	}

	.ae-carousel-dot.is-active {
		opacity: 1;
		background: var(--red, #BD1E23);
		transform: scale(1.4);
	}
}
/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE v4 — workshop fotka manja u 4 koraka, blog title font, paketi fix
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

	/* === 4 KORAKA: workshop fotka — manja visina, ne dominira mobile === */
	.how__photo {
		aspect-ratio: 16 / 9 !important;
		max-height: 220px !important;
		min-height: 0 !important;
		border-radius: 16px !important;
		margin-bottom: 8px;
	}

	.how__photo-badge,
	.how__quote {
		display: none !important;
	}

	.how__photo img {
		object-position: center 30%;
	}

	/* === BLOG teaser — naslov manji na mobilnom === */
	.blog-teaser__post-title {
		font-size: 16px !important;
		line-height: 1.25 !important;
		padding: 8px 18px 0 !important;
	}

	.blog-teaser__excerpt {
		font-size: 13.5px !important;
		padding: 8px 18px 18px !important;
	}

	.blog-teaser__meta {
		padding: 14px 18px 0 !important;
		font-size: 10.5px !important;
	}

	.blog-teaser__query .wp-block-post:first-child .blog-teaser__post-title {
		font-size: 18px !important;
	}

	.blog-teaser__photo img {
		height: 160px !important;
		min-height: 160px !important;
	}

	.blog-teaser__query .wp-block-post:first-child .blog-teaser__photo img {
		height: 180px !important;
		min-height: 180px !important;
	}

	/* === PAKETI — featured paket badge prefiks === */
	.paket--featured {
		margin-top: 14px;
	}

	.paket--featured .paket__for {
		position: relative;
		z-index: 2;
	}
}
/* ═══════════════════════════════════════════════════════════════════════════
   Single post — tipografija, margine, callout boxevi, inline images
   ═══════════════════════════════════════════════════════════════════════════ */

.article-content {
	max-width: 740px;
	margin: 0 auto;
	padding: 0 24px;
}

/* === Featured image — donja margina === */
.article-hero-img {
	margin: 0 0 40px;
}

.article-hero-img__inner img,
.wp-block-post-featured-image img {
	border-radius: 16px;
	display: block;
	width: 100%;
	height: auto;
}

/* === H2 + H3 — gornje i donje margine === */
.article-content h2,
.entry-content .wp-block-heading[class*="h2"],
.wp-block-post-content > h2 {
	font-family: var(--display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 2.2em 0 0.7em !important;
	color: var(--ink, #15171C);
	scroll-margin-top: 100px;
}

.article-content h3,
.wp-block-post-content > h3 {
	font-family: var(--display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(19px, 2.2vw, 22px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 1.7em 0 0.6em !important;
	color: var(--ink, #15171C);
}

.article-content h2:first-child,
.wp-block-post-content > h2:first-child {
	margin-top: 0 !important;
}

/* === Paragraf — line break + dovoljno spacinga === */
.article-content p,
.wp-block-post-content > p {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--ink, #15171C);
	margin: 0 0 1.4em !important;
}

.article-content p:first-of-type,
.wp-block-post-content > p:first-of-type {
	font-size: 19px;
	color: var(--ink, #15171C);
	font-weight: 500;
}

.article-content p strong,
.wp-block-post-content > p strong {
	color: var(--ink, #15171C);
	font-weight: 700;
}

/* === Linkovi === */
.article-content a,
.wp-block-post-content > p a {
	color: var(--red, #BD1E23);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	font-weight: 500;
	transition: opacity 0.15s;
}

.article-content a:hover {
	opacity: 0.7;
}

/* === Liste === */
.article-content ul,
.article-content ol,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	font-size: 17px;
	line-height: 1.65;
	margin: 0.4em 0 1.6em;
	padding-left: 24px;
}

.article-content li {
	margin-bottom: 0.6em;
}

.article-content li strong {
	font-weight: 700;
	color: var(--ink, #15171C);
}

/* === Pull-quote / blockquote === */
.article-content blockquote,
.wp-block-post-content blockquote,
.wp-block-quote {
	border-left: 4px solid var(--red, #BD1E23);
	background: linear-gradient(90deg, rgba(189, 30, 35, 0.04) 0%, transparent 100%);
	padding: 22px 26px;
	margin: 2em 0 !important;
	border-radius: 0 12px 12px 0;
	font-style: italic;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink, #15171C);
}

.article-content blockquote p {
	margin: 0 !important;
	font-size: 19px;
}

.article-content blockquote cite {
	display: block;
	font-style: normal;
	font-size: 14px;
	color: var(--ink-mute, #6B7280);
	margin-top: 12px;
	font-weight: 600;
}

/* === Callout boxevi (Ključno: / Pažnja: / Pro tip:) === */
.article-content .callout,
.article-content .ae-callout {
	background: #FAFAFB;
	border: 1px solid rgba(189, 30, 35, 0.2);
	border-left: 4px solid var(--red, #BD1E23);
	border-radius: 12px;
	padding: 22px 26px;
	margin: 2em 0;
	position: relative;
}

.article-content .ae-callout--tip {
	border-left-color: #15803D;
	border-color: rgba(21, 128, 61, 0.2);
	background: rgba(21, 128, 61, 0.03);
}

.article-content .ae-callout--warning {
	border-left-color: #D97706;
	border-color: rgba(217, 119, 6, 0.2);
	background: rgba(217, 119, 6, 0.03);
}

.article-content .ae-callout__label {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--red, #BD1E23);
	margin-bottom: 8px;
}

.article-content .ae-callout--tip .ae-callout__label { color: #15803D; }
.article-content .ae-callout--warning .ae-callout__label { color: #D97706; }

.article-content .ae-callout p:last-child {
	margin-bottom: 0 !important;
}

/* === Inline image u članku === */
.article-content .wp-block-image,
.article-content figure {
	margin: 2.4em 0 !important;
	max-width: 100%;
}

.article-content figure img,
.article-content .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.article-content figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	color: var(--ink-mute, #6B7280);
	text-align: center;
	font-style: italic;
}

/* === Inline ae-image (custom block-style image with caption) === */
.article-content .ae-inline-image {
	margin: 2.4em 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 16px 36px rgba(21, 23, 28, 0.08);
}

.article-content .ae-inline-image img {
	width: 100%;
	display: block;
}

.article-content .ae-inline-image__caption {
	background: var(--ink, #15171C);
	color: rgba(255, 255, 255, 0.78);
	padding: 12px 18px;
	font-size: 13.5px;
	font-style: italic;
}

/* === Single byline cleanup === */
.article-header__byline {
	display: flex;
	align-items: center;
	gap: 10px;
}

.article-header__byline-avatar {
	display: none;
}

.author-bio {
	display: block;
	max-width: 720px;
	margin: 40px 0 0;
	padding: 28px 30px;
	background: linear-gradient(135deg, rgba(189, 30, 35, 0.03) 0%, rgba(189, 30, 35, 0.06) 100%);
	border: 1px solid rgba(189, 30, 35, 0.12);
	border-radius: 16px;
}

.author-bio__avatar {
	display: none;
}

@media (max-width: 768px) {
	.article-content {
		padding: 0 18px;
	}
	.article-content p,
	.wp-block-post-content > p {
		font-size: 16.5px;
	}
	.article-content p:first-of-type {
		font-size: 18px;
	}
	.article-content blockquote,
	.article-content .ae-callout {
		padding: 18px 22px;
		font-size: 17px;
	}
}

/* ═══════════════════════════════════════════
   AI SPREMNOST SCORER — wizard alat
   ═══════════════════════════════════════════ */

/* ─── HERO ─── */
.scorer-hero {
	padding: 56px 0 32px;
	position: relative;
}
@media (min-width: 1024px) { .scorer-hero { padding: 70px 0 48px; } }

.scorer-hero__title {
	font-family: var(--display);
	font-size: clamp(34px, 4.4vw, 56px);
	letter-spacing: -0.025em;
	line-height: 1.08;
	font-weight: 800;
	margin-bottom: 20px;
}
.scorer-hero__title em {
	font-style: normal;
	color: var(--accent);
	font-weight: 800;
}

.scorer-hero__lead {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 640px;
	margin-bottom: 32px;
}

.scorer-hero__signals {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink-2);
}
.scorer-signal {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.scorer-signal__icon {
	font-size: 16px;
	line-height: 1;
}
.scorer-signal strong { color: var(--ink); font-weight: 600; }

/* ─── WIZARD SECTION ─── */
.scorer-wizard-section {
	padding: 24px 0 80px;
}
@media (min-width: 1024px) { .scorer-wizard-section { padding: 32px 0 104px; } }

/* ─── WIZARD CARD ─── */
.ae-wizard {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	padding: 32px 28px;
}
@media (min-width: 768px) { .ae-wizard { padding: 48px 56px; } }

/* PROGRESS */
.ae-wizard__progress {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 36px;
}
.ae-wizard__progress-bar {
	flex: 1;
	height: 6px;
	background: var(--bg-soft);
	border-radius: 999px;
	overflow: hidden;
}
.ae-wizard__progress-fill {
	display: block;
	height: 100%;
	background: var(--accent);
	transition: width 240ms ease;
}
.ae-wizard__progress-label {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink-3);
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.ae-wizard__progress-label .ae-wizard__step-num,
.ae-wizard__progress-label .ae-wizard__step-total { color: var(--ink); }

/* STEP */
.ae-wizard__form { display: block; }
.ae-wizard__step { display: none; }
.ae-wizard__step.is-active {
	display: block;
	animation: aeWizardFadeIn 200ms ease;
}
@keyframes aeWizardFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.ae-wizard__step-head { margin-bottom: 24px; }
.ae-wizard__step-title {
	font-family: var(--display);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.18;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 6px 0 10px;
}
.ae-wizard__step-title em {
	font-style: normal;
	color: var(--accent);
}
.ae-wizard__step-help {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

/* FIELDS */
.ae-wizard__field {
	margin-bottom: 20px;
}
.ae-wizard__field label {
	display: block;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-2);
	font-weight: 600;
	margin-bottom: 8px;
}
.ae-wizard__field input[type="text"],
.ae-wizard__field input[type="email"],
.ae-wizard__field textarea {
	width: 100%;
	padding: 14px 16px;
	background: var(--bg);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-md);
	font-family: var(--body);
	font-size: 16px;
	color: var(--ink);
	transition: border-color 150ms, background 150ms;
}
.ae-wizard__field input:focus,
.ae-wizard__field textarea:focus {
	outline: none;
	border-color: var(--ink);
	background: var(--bg-card);
}
.ae-wizard__field textarea {
	resize: vertical;
	min-height: 130px;
	line-height: 1.55;
}
.ae-wizard__field--checkbox label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-family: var(--body);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink-2);
	line-height: 1.5;
	font-weight: 400;
	cursor: pointer;
}
.ae-wizard__field--checkbox input[type="checkbox"] {
	width: 18px; height: 18px;
	margin-top: 2px;
	accent-color: var(--accent);
	flex-shrink: 0;
}
.ae-wizard__field--checkbox a {
	color: var(--ink);
	text-decoration: underline;
}

.ae-wizard__hint {
	display: block;
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 11px;
	color: var(--ink-3);
	letter-spacing: 0.04em;
}
.ae-wizard__error {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--accent-2);
	font-weight: 500;
	min-height: 18px;
}

/* NAV */
.ae-wizard__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.ae-wizard__btn-prev[hidden],
.ae-wizard__btn-next[hidden],
.ae-wizard__btn-submit[hidden] { display: none; }
.ae-wizard__btn-prev { margin-right: auto; }
.ae-wizard__btn-next,
.ae-wizard__btn-submit { margin-left: auto; }

/* LOADING */
.ae-wizard__loading {
	text-align: center;
	padding: 48px 24px;
}
.ae-wizard__spinner {
	width: 56px; height: 56px;
	border: 3px solid var(--bg-soft);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: aeWizardSpin 800ms linear infinite;
	margin: 0 auto 24px;
}
@keyframes aeWizardSpin { to { transform: rotate(360deg); } }
.ae-wizard__loading-title {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 8px;
}
.ae-wizard__loading-text {
	color: var(--ink-2);
	margin: 0 auto;
	max-width: 420px;
	font-size: 15px;
}

/* RESULT CARD */
.ae-wizard__result { animation: aeWizardFadeIn 320ms ease; }
.ae-result-card { padding: 8px 0; }
.ae-result-card__head {
	text-align: center;
	margin-bottom: 36px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--border);
}
.ae-result-card__score {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--accent);
	margin: 12px 0 14px;
}
.ae-result-card__score-num { font-size: clamp(56px, 7vw, 88px); line-height: 1; }
.ae-result-card__score-max { font-size: clamp(24px, 2.4vw, 32px); color: var(--ink-3); }
.ae-result-card__level {
	font-family: var(--display);
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
	margin: 0 0 12px;
}
.ae-result-card__summary {
	color: var(--ink-2);
	max-width: 560px;
	margin: 0 auto;
	line-height: 1.55;
}

.ae-result-card__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 36px;
}
@media (min-width: 720px) {
	.ae-result-card__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.ae-result-col h4 {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 16px;
	font-weight: 600;
}
.ae-result-col--strengths h4 { color: var(--green); }
.ae-result-col--gaps h4 { color: var(--warn); }
.ae-result-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ae-result-col li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
}
.ae-result-col li::before {
	position: absolute;
	left: 0; top: 0;
	font-weight: 700;
	font-size: 16px;
}
.ae-result-col--strengths li::before { content: '✓'; color: var(--green); }
.ae-result-col--gaps li::before { content: '→'; color: var(--warn); }

.ae-result-card__cta {
	background: var(--bg-soft);
	border-radius: var(--radius-lg);
	padding: 28px;
	text-align: center;
}
.ae-result-card__cta-title {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
}
.ae-result-card__cta-text {
	color: var(--ink-2);
	margin: 0 0 20px;
	font-size: 15px;
}

.ae-wizard__followup {
	margin-top: 24px;
	text-align: center;
	font-size: 13px;
	color: var(--ink-3);
}
.ae-wizard__followup a {
	color: var(--ink-2);
	text-decoration: underline;
}

/* ERROR STATE */
.ae-wizard__error-state {
	text-align: center;
	padding: 48px 24px;
}
.ae-wizard__error-state h3 {
	font-family: var(--display);
	font-size: 24px;
	margin: 0 0 12px;
}
.ae-wizard__error-state p {
	color: var(--ink-2);
	margin: 0 0 24px;
}

/* ─── WHY SECTION ─── */
.scorer-why {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 40px;
}
@media (min-width: 720px) {
	.scorer-why { grid-template-columns: repeat(3, 1fr); }
}
.scorer-why__item {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
}
.scorer-why__num {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}
.scorer-why__item h3 {
	font-family: var(--display);
	font-size: 19px;
	line-height: 1.25;
	margin: 0 0 10px;
}
.scorer-why__item p {
	color: var(--ink-2);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}

/* MOBILE TUNING */
@media (max-width: 480px) {
	.ae-wizard { padding: 24px 18px; }
	.ae-wizard__nav { flex-wrap: wrap; }
	.ae-wizard__btn-prev,
	.ae-wizard__btn-next,
	.ae-wizard__btn-submit { width: 100%; justify-content: center; margin: 0; }
}