/* ============================================================================
   LLMIC — Homepage (front-page.php)
   Hero · bento signals · journey map · report dial · proof · gradient CTA.
   ========================================================================== */

.llmic-home { overflow-x: clip; }
.llmic-eyebrow-mono {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 var(--space-s);
}
.llmic-hl { color: var(--accent-strong); }

.llmic-section {
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-m);
}
.llmic-section__head { text-align: center; max-width: 760px; margin: 0 auto var(--space-xl); }
.llmic-section__title { font-family: var(--font-display); font-size: var(--step-4); margin: 0 0 var(--space-xs); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.llmic-section__sub { color: var(--ink-2); font-size: var(--step-1); margin: 0; line-height: var(--leading-snug); }

/* --- Buttons ------------------------------------------------------------ */
.llmic-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	background: linear-gradient(140deg, var(--accent), var(--brand-600));
	color: #fff;
	font-weight: 700;
	padding: 0.9em 1.7em;
	border-radius: var(--radius-m);
	text-decoration: none;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.llmic-cta-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.06) saturate(1.05); }
.llmic-ghost-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.9em 1.5em;
	border-radius: var(--radius-m);
	border: 1px solid var(--line-strong);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.llmic-ghost-btn:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-wash); }

/* --- Trust chips -------------------------------------------------------- */
.llmic-trust {
	display: flex;
	gap: var(--space-m);
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--ink-3);
}
.llmic-trust li { position: relative; }
.llmic-trust li:not(:first-child)::before { content: "·"; margin-right: var(--space-m); margin-left: calc(var(--space-m) * -0.62); color: var(--accent); }

/* --- HERO --------------------------------------------------------------- */
.llmic-hero-home {
	position: relative;
	text-align: center;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-m) var(--space-xl);
	overflow: clip;
}
.llmic-hero-home__glow {
	position: absolute;
	z-index: 0;
	top: -8%;
	left: 50%;
	transform: translateX(-50%);
	width: min(120%, 1100px);
	height: 78%;
	background:
		radial-gradient(38% 48% at 28% 30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
		radial-gradient(34% 44% at 72% 38%, color-mix(in srgb, var(--brand-400) 22%, transparent), transparent 72%),
		radial-gradient(30% 40% at 50% 66%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
	filter: blur(54px);
	pointer-events: none;
}
.llmic-hero-home__inner { position: relative; z-index: 1; max-width: 900px; margin-inline: auto; }
.llmic-hero-home__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 1.1rem + 6vw, 5rem);
	line-height: 1.04;
	letter-spacing: var(--tracking-tight);
	margin: 0 0 var(--space-m);
	text-wrap: balance;
}
.llmic-hero-home__sub { font-size: var(--step-1); color: var(--ink-2); max-width: 58ch; margin: 0 auto var(--space-l); line-height: var(--leading-snug); }
.llmic-hero-home__cta { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-m); }

/* App-window screenshot */
.llmic-hero-home__shot { position: relative; z-index: 1; max-width: 1020px; margin: var(--space-xl) auto 0; }
.llmic-window {
	border-radius: var(--radius-l);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-1);
	box-shadow: var(--shadow-2), 0 50px 90px -30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.llmic-window__dots { display: none; }
.llmic-window img { display: block; width: 100%; height: auto; }

/* --- BENTO signals ------------------------------------------------------ */
.llmic-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-m); }
.llmic-bento__card {
	position: relative;
	overflow: hidden;
	background: var(--surface-1);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: var(--space-l);
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.llmic-bento__card::after {
	content: "";
	position: absolute;
	top: -40%; right: -10%;
	width: 50%; height: 120%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease-out);
	pointer-events: none;
}
.llmic-bento__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.llmic-bento__card:hover::after { opacity: 1; }
.llmic-bento__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem; height: 3rem;
	border-radius: var(--radius-m);
	background: var(--accent-wash);
	color: var(--accent-strong);
	margin-bottom: var(--space-s);
}
.llmic-bento__icon svg { width: 1.5rem; height: 1.5rem; }
.llmic-bento__title { font-size: var(--step-1); margin: 0 0 var(--space-2xs); }
.llmic-bento__text { color: var(--ink-2); margin: 0; line-height: var(--leading-snug); position: relative; }

.llmic-bento__card--1, .llmic-bento__card--2 { grid-column: span 3; }
.llmic-bento__card--3, .llmic-bento__card--4, .llmic-bento__card--5 { grid-column: span 2; }
.llmic-bento__card--6 { grid-column: span 6; }
@media (min-width: 861px) {
	.llmic-bento__card--6 { display: flex; align-items: center; gap: var(--space-l); }
	.llmic-bento__card--6 .llmic-bento__icon { margin-bottom: 0; flex: none; }
}
@media (max-width: 860px) {
	.llmic-bento { grid-template-columns: 1fr 1fr; }
	.llmic-bento__card { grid-column: span 1 !important; }
	.llmic-bento__card--6 { grid-column: span 2 !important; }
}
@media (max-width: 520px) {
	.llmic-bento { grid-template-columns: 1fr; }
	.llmic-bento__card, .llmic-bento__card--6 { grid-column: span 1 !important; }
}

/* --- FULL PLATFORM (tool categories) ------------------------------------ */
.llmic-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
@media (max-width: 860px) { .llmic-cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .llmic-cats { grid-template-columns: 1fr; } }
.llmic-cat {
	background: var(--surface-1);
	border: 1px solid var(--line);
	border-radius: var(--radius-l);
	padding: var(--space-l);
	box-shadow: var(--shadow-1);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.llmic-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.llmic-cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-xs); }
.llmic-cat__name { font-size: var(--step-1); margin: 0; }
.llmic-cat__count {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--accent-strong);
	background: var(--accent-wash);
	padding: 0.2em 0.6em;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.llmic-cat__tools { margin: 0; color: var(--ink-2); font-size: var(--step-0); line-height: var(--leading-body); }

/* --- JOURNEY map -------------------------------------------------------- */
.llmic-journey {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-m);
	position: relative;
}
.llmic-journey::before {
	content: "";
	position: absolute;
	top: 1.4rem;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--brand-400));
	opacity: 0.45;
}
.llmic-journey__step { text-align: center; position: relative; }
.llmic-journey__num {
	width: 2.8rem; height: 2.8rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: var(--step-1);
	box-shadow: 0 0 0 6px var(--bg);
	margin-bottom: var(--space-s);
}
.llmic-journey__title { font-size: var(--step-1); margin: 0 0 var(--space-2xs); }
.llmic-journey__text { color: var(--ink-2); margin: 0; font-size: var(--step-0); line-height: var(--leading-snug); }
@media (max-width: 760px) {
	.llmic-journey { grid-template-columns: 1fr; gap: var(--space-l); text-align: left; }
	.llmic-journey::before { display: none; }
	.llmic-journey__step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-m); align-items: start; }
	.llmic-journey__num { grid-row: span 2; margin-bottom: 0; }
}

/* --- REPORT (dev-credible) ---------------------------------------------- */
.llmic-report { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
@media (max-width: 820px) { .llmic-report { grid-template-columns: 1fr; gap: var(--space-l); } }
.llmic-report__copy .llmic-cta-btn { margin-top: var(--space-m); }
.llmic-report__card { padding: var(--space-l); }
.llmic-report__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-m); }
.llmic-report__head .llmic-mono { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-3); }
.llmic-report__dial {
	width: 5rem; height: 5rem;
	border-radius: 50%;
	background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--surface-2) 0);
	display: grid;
	place-items: center;
	position: relative;
}
.llmic-report__dial::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--surface-1); }
.llmic-report__dial b { position: relative; font-size: var(--step-2); font-weight: 800; }
.llmic-report__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.llmic-report__bars li { display: grid; gap: 0.35rem; font-size: var(--step--1); color: var(--ink-2); }
.llmic-report__bars li span { font-family: var(--font-mono); }
.llmic-report__bars i { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); position: relative; }
.llmic-report__bars i::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: 4px; background: var(--accent); }
.llmic-report__bars i.warn::after { background: var(--warning); }
.llmic-report__bars i.bad::after { background: var(--danger); }

/* --- QUOTE -------------------------------------------------------------- */
.llmic-quote { max-width: 920px; margin: var(--space-xl) auto; padding: 0 var(--space-m); text-align: center; }
.llmic-quote__text {
	font-family: var(--font-display);
	font-size: var(--step-3);
	line-height: var(--leading-snug);
	font-weight: 600;
	color: var(--ink);
	font-style: normal;
	margin: 0 0 var(--space-s);
	text-wrap: balance;
}
.llmic-quote__cite { display: block; font-family: var(--font-mono); color: var(--accent-strong); font-style: normal; font-size: var(--step-0); }
.llmic-quote__cite::before { content: "— "; }

/* --- FAQ (homepage) ----------------------------------------------------- */
.llmic-faq--home { max-width: 760px; margin-inline: auto; }

/* --- CLOSING CTA -------------------------------------------------------- */
.llmic-home-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	max-width: var(--content-max);
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-l);
	border-radius: var(--radius-xl);
	background: linear-gradient(140deg, var(--accent), var(--brand-600));
	color: #fff;
	box-shadow: var(--shadow-2), 0 30px 70px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.llmic-home-cta__glow { position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% -10%, rgba(255, 255, 255, 0.28), transparent 70%); pointer-events: none; }
.llmic-home-cta > * { position: relative; z-index: 1; }
.llmic-home-cta__title { font-family: var(--font-display); color: #fff; font-size: var(--step-4); margin: 0 0 var(--space-s); letter-spacing: var(--tracking-tight); }
.llmic-home-cta .llmic-hl { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5); text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.llmic-home-cta__text { color: rgba(255, 255, 255, 0.92); max-width: 52ch; margin: 0 auto var(--space-l); font-size: var(--step-1); }
.llmic-home-cta__actions { display: flex; gap: var(--space-s); justify-content: center; flex-wrap: wrap; }
.llmic-home-cta__primary {
	background: #fff; color: var(--accent-strong); font-weight: 700;
	padding: 0.9em 1.7em; border-radius: var(--radius-m); text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out);
}
.llmic-home-cta__primary:hover { color: var(--accent-strong); transform: translateY(-2px); }
.llmic-home-cta__secondary {
	color: #fff; border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 0.9em 1.6em; border-radius: var(--radius-m); text-decoration: none; font-weight: 600;
	transition: background var(--dur-fast) var(--ease-out);
}
.llmic-home-cta__secondary:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.llmic-trust--on-accent { color: rgba(255, 255, 255, 0.85); margin-top: var(--space-l); }
.llmic-trust--on-accent li:not(:first-child)::before { color: rgba(255, 255, 255, 0.55); }