/* ==========================================================================
   Z11 — Antigravity homepage
   Mirrors antigravity.google: wrap rhythm, 12-col grid, rounded-xl media,
   glass console, code block, inverted download panel.
   ========================================================================== */

.agy {
	background: var(--ag-bg);
	color: var(--ag-ink);
	overflow: hidden;
}

/* Aiero's own page banner would duplicate the hero headline. */
.agy-template .page-title-box,
.agy-template .page-title-bg {
	display: none !important;
}

.agy-template .breadcrumbs,
.agy-template .woocommerce-breadcrumb {
	display: none !important;
}

.agy-wrap {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: var(--ag-gutter);
	position: relative;
	z-index: 2;
}

.agy-section {
	padding-block: var(--ag-section-y);
	position: relative;
}

.agy-section--tight {
	padding-block: calc(var(--ag-section-y) * 0.62);
}

.agy-kicker {
	font-family: var(--ag-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ag-ink-subtle);
	margin: 0 0 18px;
}

.agy-kicker--invert {
	color: rgba(255, 255, 255, 0.62);
}

.agy-h2 {
	font-size: clamp(30px, 4.4vw, 54px);
	font-weight: 500;
	letter-spacing: -0.028em;
	line-height: 1.08;
	margin: 0 0 20px;
	max-width: 16ch;
	color: var(--ag-ink);
}

.agy-h2--invert {
	color: #ffffff;
	max-width: 18ch;
}

.agy-lead {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.6;
	color: var(--ag-ink-muted);
	margin: 0 0 30px;
	max-width: 52ch;
}

.agy-lead--invert {
	color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------- 1. BUTTONS */

.agy-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--ag-radius-pill);
	font-family: var(--ag-font);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 15px 28px;
	text-decoration: none !important;
	border: 1px solid transparent;
	transition: transform 0.22s var(--ag-ease), background-color 0.22s var(--ag-ease),
		border-color 0.22s var(--ag-ease), color 0.22s var(--ag-ease), box-shadow 0.22s var(--ag-ease);
	white-space: nowrap;
}

.agy-btn svg {
	width: 18px;
	height: 18px;
	transition: transform 0.22s var(--ag-ease);
}

.agy-btn:hover svg {
	transform: translateX(3px);
}

.agy-btn--primary {
	background: var(--ag-ink);
	color: var(--ag-bg);
}

.agy-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	color: var(--ag-bg);
}

.agy-btn--ghost {
	background: transparent;
	color: var(--ag-ink);
	border-color: var(--ag-outline);
	backdrop-filter: blur(8px);
}

.agy-btn--ghost:hover {
	background: var(--ag-surface-low);
	border-color: var(--ag-ink-subtle);
	color: var(--ag-ink);
}

.agy-btn--invert {
	background: #ffffff;
	color: #0b0b0f;
}

.agy-btn--invert:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
	color: #0b0b0f;
}

.agy-btn--invert-ghost {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(8px);
}

.agy-btn--invert-ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.agy-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ag-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--ag-primary) !important;
	text-decoration: none;
}

.agy-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.22s var(--ag-ease);
}

.agy-link:hover svg {
	transform: translateX(4px);
}

.agy-link--lg {
	font-size: 17px;
}

/* ---------------------------------------------------------------- 2. HERO */

.agy-hero {
	position: relative;
	padding-block: clamp(90px, 13vw, 190px) clamp(70px, 9vw, 130px);
	min-height: 78vh;
	display: flex;
	align-items: center;
	isolation: isolate;
}

.agy-hero__inner {
	width: 100%;
}

.agy-hero__title {
	font-size: clamp(42px, 7.4vw, 96px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.02;
	margin: 0 0 26px;
	color: var(--ag-ink);
}

.agy-hero__lead {
	font-size: clamp(17px, 1.7vw, 21px);
	line-height: 1.6;
	color: var(--ag-ink-muted);
	max-width: 56ch;
	margin: 0 0 38px;
}

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

/* Floating agent console */
.agy-console {
	margin-top: clamp(48px, 6vw, 80px);
	width: min(680px, 100%);
	border-radius: var(--ag-radius-lg);
	background: var(--ag-glass);
	backdrop-filter: blur(24px) saturate(150%);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
	border: 1px solid var(--ag-glass-border);
	box-shadow: var(--ag-shadow-panel);
	overflow: hidden;
	animation: agy-rise 0.9s var(--ag-ease) both 0.15s;
}

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

.agy-console__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ag-glass-border);
	background: var(--ag-surface-low);
}

.agy-console__dots {
	display: inline-flex;
	gap: 6px;
}

.agy-console__dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ag-outline);
	display: block;
}

.agy-console__title {
	font-family: var(--ag-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--ag-ink-subtle);
}

.agy-console__status {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ag-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-accent-teal);
}

.agy-console__status i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ag-accent-teal);
	box-shadow: 0 0 10px var(--ag-accent-teal);
	animation: agy-pulse 2.4s ease-in-out infinite;
}

@keyframes agy-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.agy-console__body {
	margin: 0;
	padding: 22px 20px 26px;
	font-family: var(--ag-mono) !important;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--ag-ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow-x: auto;
	white-space: pre;
}

.c-muted { color: var(--ag-ink-subtle); }
.c-key   { color: var(--ag-primary); }
.c-str   { color: var(--ag-accent-teal); }
.c-flag  { color: var(--ag-accent-violet); }
.c-ok    { color: var(--ag-accent-teal); }

[data-theme="light"] .c-key  { color: #1967d2; }
[data-theme="light"] .c-str,
[data-theme="light"] .c-ok   { color: #188038; }
[data-theme="light"] .c-flag { color: #b80672; }

[data-theme="dark"] .c-key   { color: #8ab4f8; }
[data-theme="dark"] .c-str,
[data-theme="dark"] .c-ok    { color: #81c995; }
[data-theme="dark"] .c-flag  { color: #d7aefb; }

/* ------------------------------------------------------- 3. THREE CARDS */

.agy-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
}

.agy-card {
	background: var(--ag-surface-container);
	border: 1px solid var(--ag-outline-variant);
	border-radius: var(--ag-radius-lg);
	padding: clamp(26px, 2.6vw, 38px);
	transition: transform 0.3s var(--ag-ease), border-color 0.3s var(--ag-ease),
		box-shadow 0.3s var(--ag-ease);
}

.agy-card:hover {
	transform: translateY(-4px);
	border-color: var(--ag-primary);
	box-shadow: var(--ag-shadow-card);
}

.agy-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--ag-radius-sm);
	background: var(--ag-primary-soft);
	color: var(--ag-primary);
	margin-bottom: 20px;
}

.agy-card__icon svg {
	width: 24px;
	height: 24px;
}

.agy-card__title {
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	color: var(--ag-ink);
}

.agy-card__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ag-ink-muted);
}

/* --------------------------------------------------- 4. 12-COLUMN GRID */

.agy-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(16px, 1.8vw, 26px);
	margin-top: clamp(34px, 4vw, 54px);
}

.agy-grid__item {
	grid-column: span 4;
	display: flex;
	flex-direction: column;
	background: var(--ag-surface-container);
	border: 1px solid var(--ag-outline-variant);
	border-radius: var(--ag-radius-xl);
	overflow: hidden;
	transition: transform 0.3s var(--ag-ease), box-shadow 0.3s var(--ag-ease),
		border-color 0.3s var(--ag-ease);
}

.agy-grid__item--8 { grid-column: span 8; }
.agy-grid__item--4 { grid-column: span 4; }

.agy-grid__item:hover {
	transform: translateY(-4px);
	border-color: var(--ag-primary);
	box-shadow: var(--ag-shadow-card);
}

.agy-grid__media {
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(140deg, var(--ag-glow-blue), var(--ag-glow-violet) 60%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.agy-grid__media img,
.agy-feature__media img,
.agy-work__media img,
.agy-team__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.agy-grid__glyph {
	color: var(--ag-primary);
	opacity: 0.85;
}

.agy-grid__glyph svg {
	width: 46px;
	height: 46px;
}

.agy-grid__body {
	padding: clamp(22px, 2.4vw, 34px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}

.agy-grid__title {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.022em;
	margin: 0;
	color: var(--ag-ink);
}

.agy-grid__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ag-ink-muted);
	flex: 1 1 auto;
}

/* ----------------------------------------------------- 5. FEATURE CARDS */

.agy-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
	margin-top: clamp(34px, 4vw, 54px);
}

.agy-feature {
	background: var(--ag-surface-container);
	border: 1px solid var(--ag-outline-variant);
	border-radius: var(--ag-radius-xl);
	padding: clamp(20px, 2.2vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.3s var(--ag-ease), box-shadow 0.3s var(--ag-ease);
}

.agy-feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--ag-shadow-card);
}

.agy-feature__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--ag-radius-lg);
	overflow: hidden;
	background: linear-gradient(140deg, var(--ag-glow-violet), var(--ag-glow-blue) 65%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.agy-feature__title {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.022em;
	margin: 6px 0 0;
	color: var(--ag-ink);
}

.agy-feature__text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ag-ink-muted);
	flex: 1 1 auto;
}

.agy-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

/* ------------------------------------------------------------ 6. WORK GRID */

.agy-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.agy-work {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 1.8vw, 24px);
	margin-top: clamp(30px, 3.4vw, 48px);
}

.agy-work__item {
	text-decoration: none !important;
	display: block;
}

.agy-work__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--ag-radius-lg);
	overflow: hidden;
	background: linear-gradient(140deg, var(--ag-glow-blue), transparent 70%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s var(--ag-ease), box-shadow 0.3s var(--ag-ease);
}

.agy-work__item:hover .agy-work__media {
	transform: translateY(-4px);
	box-shadow: var(--ag-shadow-card);
}

.agy-work__title {
	font-size: 16.5px;
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 14px 0 0;
	color: var(--ag-ink);
	line-height: 1.35;
}

.agy-work__item:hover .agy-work__title {
	color: var(--ag-primary);
}

/* ------------------------------------------------------------- 7. SPLIT */

.agy-split {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.agy-code {
	border-radius: var(--ag-radius-lg);
	background: var(--ag-code-bg);
	border: 1px solid var(--ag-code-border);
	overflow: hidden;
	box-shadow: var(--ag-shadow-card);
}

.agy-code__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ag-code-border);
	background: var(--ag-surface-low);
}

.agy-code__head span {
	font-family: var(--ag-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-ink-subtle);
}

.agy-code__copy {
	font-family: var(--ag-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ag-ink-subtle);
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 8px;
}

.agy-code__copy:hover {
	background: var(--ag-surface-low);
	color: var(--ag-ink);
}

.agy-code__body {
	margin: 0;
	padding: 20px;
	font-family: var(--ag-mono) !important;
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--ag-ink) !important;
	background: transparent !important;
	border: 0 !important;
	overflow-x: auto;
}

/* --------------------------------------------------------------- 8. TEAM */

.agy-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 1.8vw, 24px);
	margin-top: clamp(30px, 3.4vw, 48px);
}

.agy-team__card {
	background: var(--ag-surface-container);
	border: 1px solid var(--ag-outline-variant);
	border-radius: var(--ag-radius-lg);
	padding: 18px;
	transition: transform 0.3s var(--ag-ease), border-color 0.3s var(--ag-ease);
}

.agy-team__card:hover {
	transform: translateY(-4px);
	border-color: var(--ag-primary);
}

.agy-team__media {
	aspect-ratio: 1 / 1;
	border-radius: var(--ag-radius-sm);
	overflow: hidden;
	background: linear-gradient(140deg, var(--ag-glow-violet), transparent 70%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.agy-team__initials {
	font-size: 34px;
	font-weight: 500;
	color: var(--ag-primary);
	opacity: 0.85;
}

.agy-team__name {
	font-size: 16px;
	font-weight: 500;
	margin: 14px 0 2px;
	color: var(--ag-ink);
}

/* ------------------------------------------------- 9. INVERTED DOWNLOAD */

.agy-download {
	position: relative;
	overflow: hidden;
	border-radius: var(--ag-radius-xl);
	background: #0b0b0f;
	padding: clamp(48px, 7vw, 110px) clamp(28px, 5vw, 80px);
	isolation: isolate;
}

[data-theme="dark"] .agy-download {
	background: #05050a;
	border: 1px solid var(--ag-outline-variant);
}

.agy-download__glow {
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 130%;
	z-index: 0;
	background:
		radial-gradient(40% 50% at 22% 28%, rgba(49, 134, 255, 0.42), transparent 70%),
		radial-gradient(38% 46% at 76% 22%, rgba(124, 77, 255, 0.36), transparent 72%);
	filter: blur(24px);
	pointer-events: none;
}

.agy-download__body {
	position: relative;
	z-index: 1;
	max-width: 620px;
}

.agy-download__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

/* --------------------------------------------------------- 10. RESPONSIVE */

@media (max-width: 1024px) {
	.agy-grid__item,
	.agy-grid__item--8,
	.agy-grid__item--4 { grid-column: span 6; }
	.agy-cards { grid-template-columns: 1fr 1fr; }
	.agy-work { grid-template-columns: repeat(2, 1fr); }
	.agy-team { grid-template-columns: repeat(2, 1fr); }
	.agy-split { grid-template-columns: 1fr; }
	.agy-features { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.agy-cards { grid-template-columns: 1fr; }
	.agy-grid__item,
	.agy-grid__item--8,
	.agy-grid__item--4 { grid-column: span 12; }
	.agy-hero { min-height: auto; }
	.agy-console__body { font-size: 12px; }
	.agy-work,
	.agy-team { grid-template-columns: 1fr 1fr; }
	.agy-download { padding: 44px 24px; }
}