/* ==========================================================================
   Afterglyph home sections and shared cards
   ========================================================================== */

/* ---------- 01 Hero + sticky WebGL stage ---------- */
.ag-stagewrap { position: relative; background: var(--bg); }
.ag-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	margin-bottom: -100vh;
	margin-bottom: -100svh;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.ag-stage__gl { width: 100%; height: 100%; }
.ag-stage__fallback { position: absolute; inset: 0; opacity: .55; display: none; }
.ag-nogl .ag-stage__fallback,
.ag-nogl .ag-lab__fallback { display: block; }
.ag-nogl [data-gl] { display: none; }

.ag-hero {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	padding: calc(var(--header-h) + 40px) 0 clamp(32px, 5vh, 64px);
	overflow: hidden;
}
.ag-hero__light {
	position: absolute;
	inset: -20%;
	background: radial-gradient(40vmax 40vmax at var(--mx, 70%) var(--my, 30%), rgba(73, 107, 255, .22), transparent 60%), radial-gradient(30vmax 30vmax at calc(100% - var(--mx, 70%)) 90%, rgba(138, 92, 255, .14), transparent 60%);
	pointer-events: none;
	z-index: -1;
}
.ag-hero__inner { position: relative; }
.ag-hero__kicker { margin-bottom: clamp(20px, 3vh, 40px); }
.ag-hero__title {
	font-family: var(--font-d);
	font-weight: 800;
	font-size: clamp(2.35rem, 7.4vw, 9.6rem);
	line-height: .92;
	letter-spacing: -.05em;
}
.ag-hero__row { display: block; will-change: transform; }
.ag-hero__row--indent { padding-left: clamp(0px, 14vw, 260px); }
.ag-hero__title .ag-outline { -webkit-text-stroke-width: 4px; }
.ag-hero__stroke {
	position: absolute;
	left: 0; top: 40%;
	width: 100%; height: clamp(90px, 14vw, 220px);
	pointer-events: none;
	overflow: visible;
}
.ag-hero__foot {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) auto auto;
	align-items: end;
	gap: clamp(20px, 4vw, 64px);
	margin-top: clamp(32px, 5vh, 64px);
}
.ag-hero__lede { max-width: 44ch; font-size: var(--fs-lede); color: var(--muted); line-height: 1.5; }
.ag-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ag-scrollcue {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-m);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.ag-scrollcue__track { position: relative; width: 1px; height: 56px; background: var(--line); overflow: hidden; }
.ag-scrollcue__track i { position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--lime); animation: ag-cue 1.8s var(--ease) infinite; }
@keyframes ag-cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

@media (max-width: 900px) {
	.ag-hero__foot { grid-template-columns: 1fr; }
	.ag-scrollcue { display: none; }
	.ag-hero__row--indent { padding-left: 0; }
}

/* ---------- 02 Manifesto ---------- */
.ag-manifesto { position: relative; z-index: 1; }
.ag-manifesto__pin {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: calc(var(--header-h) + 20px) 60px;
}
.ag-manifesto__inner { position: relative; }
.ag-manifesto__a {
	font-family: var(--font-d);
	font-weight: 700;
	font-size: clamp(1.8rem, 5vw, 5.4rem);
	letter-spacing: -.035em;
	line-height: 1;
	margin-bottom: .3em;
}
.ag-manifesto__b {
	font-family: var(--font-d);
	font-weight: 800;
	font-size: clamp(1.6rem, 6.8vw, 8.6rem);
	letter-spacing: -.05em;
	line-height: .95;
	perspective: 800px;
}
.ag-manifesto__we { display: block; color: var(--muted); }
.ag-manifesto__x { display: inline-block; color: var(--lime); transform-origin: 30% 60%; will-change: transform; }
[data-theme="light"] .ag-manifesto__x { color: var(--blue); }
.ag-manifesto__sub { max-width: 56ch; margin-top: clamp(28px, 4vh, 56px); font-size: var(--fs-lede); color: var(--muted); }
.ag-manifesto .ag-char { display: inline-block; }

/* ---------- 03 Intro ---------- */
.ag-intro { overflow: hidden; padding-bottom: calc(var(--sec-pad) * 1.6); }
.ag-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.ag-intro__copy .ag-h2 { font-size: clamp(2rem, 4.4vw, 4.6rem); margin-bottom: 36px; }
.ag-intro__copy p + p { margin-top: 18px; }
.ag-intro__copy p:not(.ag-label):not(.ag-lede) { color: var(--paper-muted); max-width: 52ch; }
.ag-intro__cta { margin-top: 40px; }
.ag-intro__stack { position: relative; height: clamp(440px, 52vw, 720px); }
.ag-intro__card {
	position: absolute;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(8, 9, 13, .45);
	transform-style: preserve-3d;
	will-change: transform;
	background: var(--bg);
}
.ag-intro__card > div { width: 100%; height: 100%; }
.ag-intro__card figcaption {
	position: absolute;
	left: 16px; bottom: 14px;
	font-family: var(--font-m);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(8, 9, 13, .6);
	backdrop-filter: blur(6px);
}
.ag-intro__card--a { left: 0; top: 8%; width: 62%; aspect-ratio: 4 / 3; z-index: 2; }
.ag-intro__card--b { right: 0; top: 0; width: 44%; aspect-ratio: 3 / 4; z-index: 1; }
.ag-intro__card--c { right: 10%; bottom: 0; width: 46%; aspect-ratio: 1; z-index: 3; }
.ag-intro__ring { position: absolute; left: 8%; bottom: 4%; width: 26%; z-index: 4; pointer-events: none; }

.ag-iris {
	position: absolute;
	left: 50%; bottom: 0;
	width: 10px; height: 10px;
	pointer-events: none;
}
.ag-iris__c {
	position: absolute;
	left: 50%; top: 50%;
	width: 300vmax; height: 300vmax;
	margin: -150vmax 0 0 -150vmax;
	border-radius: 50%;
	background: var(--bg);
	transform: scale(0);
	will-change: transform;
}
.ag-nomotion .ag-iris { display: none; }

@media (max-width: 900px) {
	.ag-intro__grid { grid-template-columns: 1fr; }
	.ag-intro__stack { height: 110vw; max-height: 620px; }
}

/* ---------- 04 Services pinned ---------- */
.ag-svc { padding: 0; background: var(--bg); overflow: hidden; }
.ag-svc__pin { position: relative; min-height: 100vh; min-height: 100svh; }
.ag-svc__bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(60vmax 60vmax at 78% 50%, color-mix(in srgb, var(--svc, #496BFF) 22%, transparent), transparent 62%);
	transition: background 1s var(--ease);
	pointer-events: none;
}
.ag-svc__gl { position: absolute; right: 0; top: 0; width: 56%; height: 100%; pointer-events: none; }
.ag-svc__frame {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px;
	grid-template-rows: auto 1fr;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: calc(var(--header-h) + 24px);
	padding-bottom: 48px;
	gap: 0 24px;
}
.ag-svc__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.ag-svc__head .ag-label { margin: 0; }
.ag-svc__kicker { font-family: var(--font-b); font-weight: 500; font-size: 1rem; color: var(--muted); }
.ag-svc__count { font-family: var(--font-m); font-size: .85rem; color: var(--muted); letter-spacing: .1em; }
.ag-svc__now { color: var(--lime); display: inline-block; min-width: 2ch; }
.ag-svc__items { position: relative; align-self: center; height: min(66vh, 620px); }
.ag-svc__item { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; max-width: 52%; }
.ag-svc__num { font-family: var(--font-m); color: var(--lime); font-size: .85rem; letter-spacing: .14em; margin-bottom: 14px; }
.ag-svc__title { font-size: clamp(2.2rem, 5.2vw, 6.4rem); line-height: .92; margin-bottom: 28px; }
.ag-svc__tmask { display: block; overflow: hidden; padding-bottom: .06em; }
.ag-svc__t { display: block; }
.ag-svc__short { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.4rem); margin-bottom: 14px; }
.ag-svc__desc { color: var(--muted); max-width: 52ch; margin-bottom: 20px; }
.ag-svc__caps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ag-svc__caps li { font-family: var(--font-m); font-size: .72rem; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.ag-svc__art { display: none; }
.ag-svc__rail { position: relative; align-self: center; justify-self: end; width: 2px; height: 50vh; background: var(--line); }
.ag-svc__railfill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--lime); transform-origin: top; transform: scaleY(0); }
.ag-svc__rail i { position: absolute; left: 50%; top: calc(var(--t) / 5 * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--muted); }

/* Without the pinned stage (mobile, reduced motion, no JS): a vertical sequence */
.ag-svc--flow .ag-svc__gl,
.ag-svc--flow .ag-svc__rail,
.ag-svc--flow .ag-svc__count { display: none; }
.ag-svc--flow .ag-svc__frame { display: block; padding-block: var(--sec-pad); min-height: 0; }
.ag-svc--flow .ag-svc__items { height: auto; display: grid; gap: clamp(64px, 10vw, 120px); margin-top: 48px; }
.ag-svc--flow .ag-svc__item { position: relative; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.ag-svc--flow .ag-svc__art { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.ag-svc--flow .ag-svc__title { font-size: clamp(2rem, 7vw, 5rem); }
@media (max-width: 760px) {
	.ag-svc--flow .ag-svc__item { grid-template-columns: 1fr; }
	.ag-svc--flow .ag-svc__art { order: -1; }
}

/* ---------- Project cards ---------- */
.ag-work__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: end; gap: 32px; margin-bottom: clamp(60px, 9vw, 140px); }
.ag-work__head .ag-label { grid-column: 1 / -1; margin-bottom: 0; }
.ag-work__intro { color: var(--muted); max-width: 44ch; }
.ag-work__list { display: grid; gap: clamp(80px, 12vw, 200px); }
.ag-work__more { margin-top: clamp(60px, 8vw, 120px); display: flex; justify-content: center; }

.ag-pcard { position: relative; --pc: var(--blue); }
.ag-pcard__link { display: grid; gap: 28px; }
.ag-pcard__media {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--bg2);
	transform-origin: center;
}
.ag-pcard__img { width: 100%; height: 100%; transition: transform 1.2s var(--ease); will-change: transform; }
.ag-pcard__img .ag-art { width: 100%; height: 100%; }
.ag-pcard__tag {
	position: absolute;
	left: 18px; top: 18px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(8, 9, 13, .62);
	backdrop-filter: blur(8px);
	font-family: var(--font-m);
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
}
.ag-pcard__meta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; }
.ag-pcard__num { font-family: var(--font-m); font-size: .8rem; color: var(--pc); }
.ag-pcard__title { font-family: var(--font-d); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 3.4rem); letter-spacing: -.035em; line-height: 1; }
.ag-pcard__title span { display: inline-block; transition: transform .7s var(--ease); }
.ag-pcard__line { grid-column: 2; color: var(--muted); max-width: 52ch; }
.ag-pcard__dl { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 6px; font-size: .875rem; }
.ag-pcard__dl div { display: flex; gap: 8px; }
.ag-pcard__dl dt { font-family: var(--font-m); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.ag-pcard__dl dd { transition: transform .6s var(--ease); }
.ag-pcard__cta { grid-column: 3; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.ag-pcard__cta .ag-icon { width: 18px; height: 18px; transition: transform .5s var(--ease); }
@media (hover: hover) {
	.ag-pcard__link:hover .ag-pcard__img { transform: scale(1.06); }
	.ag-pcard__link:hover .ag-pcard__title span { transform: translateX(12px); color: var(--pc); }
	.ag-pcard__link:hover .ag-pcard__dl dd { transform: translateX(4px); }
	.ag-pcard__link:hover .ag-pcard__cta .ag-icon { transform: rotate(45deg); }
}

.ag-pcard--wide .ag-pcard__media { aspect-ratio: 16 / 8; }
.ag-pcard--offset { width: min(100%, 64%); margin-left: auto; }
.ag-pcard--offset .ag-pcard__media { aspect-ratio: 4 / 3; }
.ag-pcard--tall { width: min(100%, 46%); margin-left: 8%; }
.ag-pcard--tall .ag-pcard__media { aspect-ratio: 3 / 4; }
.ag-pcard--tall .ag-pcard__meta,
.ag-pcard--offset .ag-pcard__meta { grid-template-columns: auto minmax(0, 1fr); }
.ag-pcard--tall .ag-pcard__cta,
.ag-pcard--offset .ag-pcard__cta { grid-column: 2; grid-row: auto; margin-top: 8px; }
.ag-pcard--pair .ag-pcard__link { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: clamp(24px, 4vw, 64px); }
.ag-pcard--pair .ag-pcard__media { aspect-ratio: 5 / 4; }
.ag-pcard--pair .ag-pcard__meta { grid-template-columns: auto minmax(0, 1fr); }
.ag-pcard--pair .ag-pcard__cta { grid-column: 2; grid-row: auto; margin-top: 8px; }

@media (max-width: 900px) {
	.ag-work__head { grid-template-columns: 1fr; }
	.ag-pcard--offset,
	.ag-pcard--tall { width: 100%; margin-left: 0; }
	.ag-pcard--pair .ag-pcard__link { grid-template-columns: 1fr; }
	.ag-pcard__meta { grid-template-columns: auto minmax(0, 1fr); }
	.ag-pcard__cta { grid-column: 2; grid-row: auto; }
}

/* Hover distortion target */
.is-distorting { filter: url(#ag-distort); }

/* ---------- 06 Horizontal story ---------- */
.ag-hz { padding: 0; background: var(--bg); overflow: hidden; }
.ag-hz__pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.ag-hz__ghost {
	position: absolute;
	left: 0; bottom: 6vh;
	font-family: var(--font-d);
	font-weight: 900;
	font-size: clamp(5rem, 20vw, 22rem);
	letter-spacing: -.05em;
	line-height: .8;
	white-space: nowrap;
	color: rgba(245, 245, 243, .045);
	pointer-events: none;
	will-change: transform;
}
.ag-hz__track { position: relative; display: flex; align-items: center; gap: clamp(32px, 5vw, 96px); height: 100%; padding-inline: var(--gutter) 20vw; width: max-content; will-change: transform; }
.ag-hz__panel { flex: none; }
.ag-hz__panel--intro { width: min(64vw, 900px); }
.ag-hz__panel--intro .ag-h1 { margin-bottom: 28px; }
.ag-hz__panel--intro p { color: var(--muted); max-width: 40ch; font-size: var(--fs-lede); }
.ag-hz__panel--item { width: min(72vw, 1080px); --pc: var(--blue); perspective: 1200px; }
.ag-hz__link { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.ag-hz__num {
	position: absolute;
	left: -.15em; top: -.75em;
	z-index: 2;
	font-family: var(--font-d);
	font-weight: 900;
	font-size: clamp(4rem, 9vw, 9rem);
	color: var(--pc);
	line-height: 1;
	letter-spacing: -.05em;
	mix-blend-mode: normal;
}
.ag-hz__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; transform-style: preserve-3d; will-change: transform; }
.ag-hz__meta h3 { font-family: var(--font-d); font-weight: 800; font-size: clamp(1.6rem, 3vw, 3rem); letter-spacing: -.03em; line-height: 1; margin: 12px 0; }
.ag-hz__meta p { color: var(--muted); }
.ag-hz__ind { font-family: var(--font-m); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: var(--ink) !important; }
.ag-hz__tag { display: inline-block; font-family: var(--font-m); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pc); padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; }
.ag-hz__panel--outro { width: min(60vw, 760px); }
.ag-hz__big { font-family: var(--font-d); font-weight: 800; font-size: clamp(2rem, 5vw, 5.2rem); line-height: 1; letter-spacing: -.04em; margin-bottom: 36px; }
.ag-hz__bar { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; height: 2px; background: var(--line); }
.ag-hz__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--lime)); transform: scaleX(0); transform-origin: left; }

.ag-hz--flow .ag-hz__pin { height: auto; padding-block: var(--sec-pad); }
.ag-hz--flow .ag-hz__track { flex-direction: column; align-items: stretch; width: auto; padding-inline: var(--gutter); gap: 80px; }
.ag-hz--flow .ag-hz__panel { width: 100%; }
.ag-hz--flow .ag-hz__ghost,
.ag-hz--flow .ag-hz__bar { display: none; }
@media (max-width: 760px) { .ag-hz--flow .ag-hz__link { grid-template-columns: 1fr; } }

/* ---------- 07 Process ---------- */
.ag-proc__head { margin-bottom: clamp(60px, 8vw, 120px); }
.ag-proc__body { position: relative; }
.ag-proc__rail { position: absolute; left: clamp(20px, 6vw, 96px); top: 0; width: 40px; height: 100%; margin-left: -20px; overflow: visible; }
.ag-proc__rail path { fill: none; stroke: var(--paper-ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ag-proc__list { display: grid; gap: clamp(48px, 7vw, 110px); }
.ag-proc__step {
	position: relative;
	display: grid;
	grid-template-columns: clamp(40px, 12vw, 192px) 96px minmax(0, 1fr);
	align-items: start;
	gap: 0 clamp(16px, 3vw, 48px);
	opacity: .32;
	transition: opacity .6s var(--ease);
}
.ag-proc__step.is-active { opacity: 1; }
.ag-proc__n {
	justify-self: center;
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 2px var(--paper-ink);
	font-family: var(--font-m);
	font-weight: 600;
	font-size: .85rem;
	transition: background .5s var(--ease), color .5s var(--ease);
}
.ag-proc__step.is-active .ag-proc__n { background: var(--paper-ink); color: var(--lime); }
.ag-proc__sym svg { width: 80px; height: 80px; overflow: visible; }
.ag-proc__p1 { fill: var(--blue); }
.ag-proc__p2 { fill: var(--violet); }
.ag-proc__p3 { fill: var(--paper-ink); }
.ag-proc__txt h3 { font-family: var(--font-d); font-weight: 800; font-size: clamp(1.8rem, 4vw, 4rem); letter-spacing: -.035em; line-height: 1; margin-bottom: 14px; }
.ag-proc__txt p { color: var(--paper-muted); max-width: 54ch; }
.ag-proc__del { margin-top: 10px; font-family: var(--font-m); font-size: .75rem; letter-spacing: .04em; color: var(--paper-ink) !important; }
.ag-proc__more { margin-top: clamp(60px, 8vw, 120px); }
@media (max-width: 700px) {
	.ag-proc__step { grid-template-columns: 56px minmax(0, 1fr); }
	.ag-proc__sym { display: none; }
	.ag-proc__rail { left: 28px; }
}

/* ---------- 08 Technology ---------- */
.ag-tech__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.ag-tech__head .ag-h2 { margin-bottom: 20px; }
.ag-tech__intro { color: var(--muted); max-width: 44ch; margin-bottom: 40px; }
.ag-tech__panel { padding: 28px; border-radius: var(--radius); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); max-width: 520px; }
.ag-tech__panel h3 { font-family: var(--font-d); font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: 8px; }
.ag-tech__panel p { color: var(--muted); margin-bottom: 18px; }
.ag-tech__panel ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-tech__panel li { padding: 6px 12px; border-radius: 999px; background: rgba(245, 245, 243, .06); font-family: var(--font-m); font-size: .75rem; }
.ag-tech__stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 640px; justify-self: center; --r: min(42%, 270px); }
.ag-tech__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ag-tech__lines line { stroke: rgba(245, 245, 243, .16); stroke-width: 1; }
.ag-tech__lines line.is-active { stroke: var(--lime); stroke-width: 1.5; }
.ag-tech__rings i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(245, 245, 243, .12); transform: translate(-50%, -50%); }
.ag-tech__rings i:nth-child(1) { width: 34%; height: 34%; }
.ag-tech__rings i:nth-child(2) { width: 62%; height: 62%; border-style: solid; }
.ag-tech__rings i:nth-child(3) { width: 86%; height: 86%; }
.ag-tech__core {
	position: absolute;
	left: 50%; top: 50%;
	width: 112px; height: 112px;
	margin: -56px 0 0 -56px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(73, 107, 255, .5), rgba(138, 92, 255, .15) 60%, transparent 72%);
}
.ag-tech__mark { width: 52px; height: 52px; color: var(--ink); }
.ag-tech__orbit { position: absolute; inset: 0; }
.ag-tech__node {
	position: absolute;
	left: 50%; top: 50%;
	transform: rotate(calc(var(--a) + var(--spin, 0deg))) translateX(var(--r)) rotate(calc(-1 * (var(--a) + var(--spin, 0deg))));
	will-change: transform;
}
.ag-tech__nodein {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transform: translate(-50%, -50%);
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--bg2);
	box-shadow: inset 0 0 0 1px var(--line);
	font-weight: 600;
	font-size: .875rem;
	white-space: nowrap;
	transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .5s var(--ease);
}
.ag-tech__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.ag-tech__node.is-active .ag-tech__nodein,
.ag-tech__node:hover .ag-tech__nodein { background: var(--lime); color: var(--bg); box-shadow: none; transform: translate(-50%, -50%) scale(1.08); }
.ag-tech__node.is-active .ag-tech__dot { background: var(--bg); }
@media (max-width: 900px) {
	.ag-tech__grid { grid-template-columns: 1fr; }
	.ag-tech__stage { --r: 38%; }
	.ag-tech__nodein { font-size: .75rem; padding: 8px 12px; }
}

/* ---------- 09 Lab ---------- */
.ag-lab__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 32px; align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.ag-lab__head .ag-label { grid-column: 1 / -1; margin-bottom: 0; }
.ag-lab__head p { color: var(--muted); }
.ag-lab__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; }
.ag-lab__field { position: relative; grid-row: span 2; min-height: 520px; border-radius: var(--radius); overflow: hidden; background: #05060A; box-shadow: inset 0 0 0 1px var(--line); }
.ag-lab__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-lab__fallback { position: absolute; inset: 0; display: none; }
.ag-lab__hint { position: absolute; left: 24px; top: 20px; font-family: var(--font-m); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ag-lab__modes { position: absolute; left: 20px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.ag-lab__modes .ag-chip { background: rgba(8, 9, 13, .6); backdrop-filter: blur(8px); }
.ag-lab__modes .ag-chip.is-active { background: var(--ink); }
.ag-lab__type,
.ag-lab__magnets { position: relative; border-radius: var(--radius); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); min-height: 252px; overflow: hidden; }
.ag-lab__cap { position: absolute; left: 20px; top: 16px; font-family: var(--font-m); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); z-index: 1; }
.ag-lab__word {
	position: absolute;
	inset: 40px 12px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-d);
	font-size: clamp(2rem, 4.6vw, 4.8rem);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1;
	user-select: none;
}
.ag-lab__word span { display: inline-block; transition: color .3s; }
.ag-lab__ball {
	position: absolute;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, #fff8, transparent 40%), var(--blue);
	box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .6);
	touch-action: none;
}
.ag-lab__ball--1 { background: radial-gradient(circle at 32% 30%, #fff8, transparent 40%), var(--violet); width: 80px; height: 80px; }
.ag-lab__ball--2 { background: radial-gradient(circle at 32% 30%, #fff, transparent 40%), var(--lime); width: 52px; height: 52px; }
@media (max-width: 900px) {
	.ag-lab__head,
	.ag-lab__grid { grid-template-columns: 1fr; }
	.ag-lab__field { grid-row: auto; min-height: 420px; }
}

/* ---------- 10 Numbers ---------- */
.ag-num { overflow: hidden; }
.ag-num__geo { position: absolute; right: -10vw; top: 50%; width: min(70vw, 900px); transform: translateY(-50%); pointer-events: none; }
[data-theme="dark"] .ag-num__geo g { stroke: #F5F5F3; }
.ag-num__head { margin-bottom: clamp(48px, 7vw, 110px); }
.ag-num__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.ag-num__item { position: relative; padding-top: 24px; border-top: 1px solid var(--line); }
.ag-num__item dt { font-family: var(--font-m); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.ag-num__item dd { display: flex; align-items: flex-start; font-family: var(--font-d); font-weight: 800; font-size: clamp(3rem, 7.6vw, 8.6rem); letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.ag-num__s { font-size: .45em; margin-left: .06em; color: var(--blue); }
.ag-num__u { width: 100%; height: 18px; margin-top: 16px; overflow: visible; }
.ag-num__u path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-theme="dark"] .ag-num__u path { stroke: var(--lime); }
[data-theme="dark"] .ag-num__s { color: var(--lime); }
@media (max-width: 900px) { .ag-num__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 11 Testimonials ---------- */
.ag-quotes { overflow: hidden; }
.ag-quotes__head { margin-bottom: clamp(40px, 6vw, 80px); }
.ag-quotes__viewport { overflow: hidden; padding-inline: var(--gutter); }
.ag-quotes__track { display: flex; gap: clamp(20px, 3vw, 48px); width: max-content; touch-action: pan-y; }
.ag-quote {
	position: relative;
	width: min(860px, 84vw);
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--radius);
	background: var(--bg2);
	box-shadow: inset 0 0 0 1px var(--line);
	user-select: none;
	--qc: var(--blue);
}
.ag-quote__mark { width: 64px; height: 48px; fill: var(--qc); margin-bottom: 28px; }
.ag-quote blockquote p { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.3rem, 2.5vw, 2.5rem); line-height: 1.18; letter-spacing: -.025em; }
.ag-quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.ag-quote__img { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; clip-path: circle(50%); }
.ag-quote figcaption strong { display: block; font-weight: 600; }
.ag-quote figcaption em { font-style: normal; color: var(--muted); font-size: .875rem; }
.ag-quotes__controls { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.ag-quotes__pos { font-family: var(--font-m); font-size: .8rem; color: var(--muted); min-width: 6ch; text-align: center; }

/* ---------- 12 Journal ---------- */
.ag-journal { overflow: hidden; background: var(--bg2); }
.ag-journal__ghost {
	position: absolute;
	top: 6%; left: 0;
	font-family: var(--font-d);
	font-weight: 900;
	font-size: clamp(6rem, 24vw, 26rem);
	line-height: .8;
	letter-spacing: -.06em;
	white-space: nowrap;
	color: rgba(245, 245, 243, .035);
	pointer-events: none;
	will-change: transform;
}
.ag-journal__head { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(48px, 7vw, 110px); }
.ag-journal__head .ag-label { width: 100%; margin-bottom: 0; }
.ag-journal__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.ag-journal__grid .ag-acard:nth-child(3n+2) { margin-top: clamp(0px, 8vw, 120px); }
.ag-journal__grid .ag-acard:nth-child(3n+3) { margin-top: clamp(0px, 4vw, 60px); }
@media (max-width: 900px) {
	.ag-journal__grid { grid-template-columns: 1fr; }
	.ag-journal__grid .ag-acard { margin-top: 0 !important; }
}

.ag-acard__link { display: grid; gap: 22px; }
.ag-acard__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg2); }
.ag-acard__media img,
.ag-acard__media .ag-art { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.ag-acard__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-m); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.ag-acard__meta span:first-child { color: var(--lime); }
[data-theme="light"] .ag-acard__meta span:first-child { color: var(--blue); }
.ag-acard__title { font-family: var(--font-d); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.55rem); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .8s var(--ease); display: inline; }
.ag-acard__excerpt { color: var(--muted); margin-top: 10px; }
.ag-acard__sample { display: inline-block; margin-top: 14px; font-family: var(--font-m); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
@media (hover: hover) {
	.ag-acard__link:hover .ag-acard__media img,
	.ag-acard__link:hover .ag-acard__media .ag-art { transform: scale(1.06) rotate(.6deg); }
	.ag-acard__link:hover .ag-acard__title { background-size: 100% 1px; }
}

/* ---------- 13 CTA ---------- */
.ag-cta {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--bg);
	color: var(--ink);
	isolation: isolate;
}
.ag-cta__bg { position: absolute; inset: 0; background: var(--paper); transform: scaleY(0); transform-origin: bottom; z-index: -2; }
.ag-cta__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
.ag-cta.is-inverted { color: var(--paper-ink); }
.ag-cta.is-inverted .ag-label { color: var(--paper-muted); }
.ag-cta__inner { position: relative; }
.ag-cta__title { font-size: clamp(2.2rem, 7.6vw, 9.4rem); line-height: .92; letter-spacing: -.05em; margin-bottom: clamp(32px, 5vw, 72px); }
.ag-cta__title .ag-line:nth-child(2) .ag-line__in { padding-left: clamp(0px, 10vw, 220px); }
.ag-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.ag-cta__text { max-width: 40ch; font-size: var(--fs-lede); color: inherit; opacity: .78; }

.ag-orb {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(180px, 18vw, 260px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--blue);
	color: var(--ink);
	isolation: isolate;
	overflow: hidden;
	will-change: transform;
}
.ag-orb__fill { position: absolute; inset: 0; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform .7s var(--ease); z-index: -1; }
.ag-orb__ring { position: absolute; inset: 6%; width: 88%; height: 88%; animation: ag-spin 16s linear infinite; }
.ag-orb__ring text { font-family: var(--font-m); font-size: 11.5px; letter-spacing: .32em; fill: currentColor; }
.ag-orb__label { font-family: var(--font-d); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; text-align: center; max-width: 7em; line-height: 1.1; transition: transform .6s var(--ease); }
.ag-orb__icon { position: absolute; bottom: 24%; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
@keyframes ag-spin { to { transform: rotate(360deg); } }
@media (hover: hover) {
	.ag-orb:hover { color: var(--bg); }
	.ag-orb:hover .ag-orb__fill { transform: scale(1); }
	.ag-orb:hover .ag-orb__label { transform: translateY(-10px) scale(1.06); }
	.ag-orb:hover .ag-orb__icon { opacity: 1; transform: none; }
}