/* ============================================================
   About page (page-about.php)
   ============================================================ */

/* --------- HERO + PLUG --------- */
.ab-hero { padding-bottom: 88px; }

.ab-plug {
	display: flex; align-items: center; justify-content: center;
	max-width: 900px; margin: 56px auto 0;
}
.ab-plug__end {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	padding: 20px 18px; border-radius: var(--radius);
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px);
}
.ab-plug__label {
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9db8ff;
}
.ab-plug__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ab-plug__chips span {
	font-size: 13.5px; font-weight: 600; color: #dfe6f5;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}

.ab-plug__core {
	flex: none; position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	width: 132px; height: 132px; border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #1f2b4f 0%, #0d1424 75%);
	box-shadow: 0 0 0 1px rgba(157,184,255,.25), 0 0 60px -6px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.ab-plug__core::before {
	content: ""; position: absolute; inset: -6px; border-radius: 50%; padding: 2px;
	background: var(--grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: .8;
}
.ab-plug__core img { width: 44px; height: 44px; }
.ab-plug__core span { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.01em; }

/* Cable with a travelling spark */
.ab-plug__cable {
	flex: 0 1 72px; min-width: 28px; height: 2px; position: relative; overflow: hidden;
	background: linear-gradient(90deg, rgba(76,141,255,.6), rgba(124,58,237,.6));
}
.ab-plug__cable i {
	position: absolute; top: -1px; left: -30%; width: 30%; height: 4px; border-radius: 4px;
	background: linear-gradient(90deg, transparent, #fff, transparent);
	animation: ab-spark 2.4s ease-in-out infinite;
}
.ab-plug__cable + .ab-plug__core + .ab-plug__cable i { animation-delay: 1.2s; }
@keyframes ab-spark { to { left: 100%; } }

/* --------- STORY --------- */
.ab-story { padding: 104px 0; }
.ab-story__grid {
	display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start;
}
.ab-story__title {
	font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12;
}
.ab-story__title .grad-text { display: block; }
.ab-story__body {
	padding-left: 32px; border-left: 2px solid transparent;
	border-image: linear-gradient(180deg, #4c8dff, #7c3aed) 1;
}
.ab-story__body p { color: var(--muted); font-size: 18px; line-height: 1.7; }
.ab-story__body p + p { margin-top: 20px; }
.ab-story__body p:first-child { color: var(--ink); }

/* --------- PRINCIPLES --------- */
.ab-rules { padding: 96px 0; background: var(--bg-alt); border-block: 1px solid var(--line); }
.ab-rules__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
	counter-reset: none;
}
.ab-rule {
	position: relative; overflow: hidden;
	padding: 30px 28px 32px; border-radius: var(--radius-lg);
	background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ab-rule:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d6e0f3; }
.ab-rule__num {
	display: block; font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1;
	letter-spacing: -.04em; margin-bottom: 18px;
	color: transparent; -webkit-text-stroke: 1.5px #c9d6f2;
	transition: -webkit-text-stroke-color .2s ease;
}
.ab-rule:hover .ab-rule__num { -webkit-text-stroke-color: #8b5cf6; }
.ab-rule h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.ab-rule p { margin-top: 10px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* --------- BUILT BY CHATTING --------- */
.ab-build {
	position: relative; overflow: hidden; isolation: isolate;
	padding: 104px 0; color: #fff;
	background: radial-gradient(900px 500px at 85% 20%, #221a4d 0%, #0d1424 60%, #070b17 100%);
}
.ab-build__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.ab-build__title {
	color: #fff; font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.03em;
}
.ab-build__copy p { margin: 18px 0 30px; color: rgba(255,255,255,.7); font-size: 17.5px; line-height: 1.65; }

.ab-log { display: flex; flex-direction: column; gap: 14px; }
.ab-log__row {
	padding: 18px 20px; border-radius: var(--radius);
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.ab-log__row:nth-child(even) { margin-left: 36px; }
.ab-log__ask { color: #fff; font-size: 16px; line-height: 1.5; }
.ab-log__who {
	display: inline-block; margin-right: 10px; padding: 2px 9px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px;
	background: var(--grad); color: #fff;
}
.ab-log__done {
	display: flex; align-items: center; gap: 8px; margin-top: 10px;
	color: #86efac; font-size: 14px; font-weight: 600;
}
.ab-log__done svg { flex: none; }

/* --------- FACTS --------- */
.ab-facts { padding: 72px 0; }
.ab-facts__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.ab-facts__row li { text-align: center; padding: 8px 20px; }
.ab-facts__row li + li { border-left: 1px solid var(--line); }
.ab-facts__row strong {
	display: inline-block; font-family: var(--font-display); font-weight: 800;
	font-size: clamp(34px, 4vw, 48px); letter-spacing: -.04em; line-height: 1.1;
}
.ab-facts__row span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }

/* --------- RESPONSIVE --------- */
@media (max-width: 980px) {
	.ab-story__grid, .ab-build__grid { grid-template-columns: 1fr; gap: 40px; }
	.ab-rules__grid { grid-template-columns: repeat(2, 1fr); }
	.ab-facts__row { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.ab-facts__row li:nth-child(3) { border-left: 0; }
}
@media (max-width: 720px) {
	.ab-hero { padding-bottom: 64px; }
	.ab-plug { flex-direction: column; margin-top: 40px; }
	.ab-plug__end { width: 100%; }
	.ab-plug__cable { flex: none; width: 2px; height: 32px; min-width: 0; background: linear-gradient(180deg, rgba(76,141,255,.6), rgba(124,58,237,.6)); }
	.ab-plug__cable i { top: -30%; left: -1px; width: 4px; height: 30%; background: linear-gradient(180deg, transparent, #fff, transparent); animation-name: ab-spark-v; }
	.ab-plug__core { width: 112px; height: 112px; }
	.ab-story, .ab-rules, .ab-build { padding: 72px 0; }
	.ab-story__body { padding-left: 20px; }
	.ab-story__body p { font-size: 17px; }
	.ab-rules__grid { grid-template-columns: 1fr; }
	.ab-log__row:nth-child(even) { margin-left: 0; }
	.ab-facts { padding: 56px 0; }
}
@keyframes ab-spark-v { to { top: 100%; } }

@media (prefers-reduced-motion: reduce) {
	.ab-plug__cable i { animation: none; display: none; }
	.ab-rule, .ab-rule:hover { transform: none; }
}