/* ══════════════════════════════════════════════════════════════════════════
 * OGA Mini App · assets/css/ogace-hero-network.css
 * NETWORK HERO · TRUST STRIP · FEATURE GRID
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Register inspired by the "trust network" pattern used by B2B network /
 * compliance platforms: a quiet globe-and-grid hero background, a blunt
 * live-network stat row, a wordmark trust strip, and a plain-language
 * product grid with bulleted cards. Rebuilt entirely on OGA's own brand
 * tokens (--gold = brand blue, --brand-red, --bg*, --fg*) — no colour here
 * is borrowed, only the layout grammar.
 *
 * Consumes tokens from ogace-brand.css. Loads after it so the light/dark
 * remap is already in scope. Defines the .oga-btn family that
 * ogace-brand.css already anticipates (see its dark-mode button-ink fix).
 * ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
 * BUTTONS · shared by the hero and anywhere else that needs a CTA pair
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 22px;
	border-radius: var(--r8);
	font-family: var(--display);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
	white-space: nowrap;
}
.oga-btn:active { transform: translateY(1px); }

.oga-btn--primary {
	background: var(--gold);
	border-color: var(--gold);
	color: #fff;
}
.oga-btn--primary:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

.oga-btn--ghost {
	background: transparent;
	border-color: var(--line2);
	color: var(--fg0);
}
.oga-btn--ghost:hover { border-color: var(--line3); background: var(--bg2); }


/* ══════════════════════════════════════════════════════════════════════════
 * HERO · globe-and-grid trust register
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-hero-network {
	position: relative;
	overflow: hidden;
	padding: 72px 20px 48px;
	text-align: center;
	background: var(--bg0);
	border-bottom: 1px solid var(--line1);
}

/* Faint globe/line-grid motif — a nod to the mark's own globe, laid flat
 * behind the headline as texture rather than illustration. Two radial
 * "meridian" arcs plus a soft dot grid, both brand-tinted and very low
 * opacity so they read as material, not decoration. */
.oga-hero-network__pattern {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 50% -10%, var(--gold-glow) 0%, transparent 55%),
		repeating-linear-gradient(90deg, var(--line1) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(0deg,  var(--line1) 0 1px, transparent 1px 64px);
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
	        mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 0%, transparent 75%);
	opacity: .9;
}
body.oga-brand-dark .oga-hero-network__pattern { opacity: .6; }

.oga-hero-network__inner {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

.oga-hero-network__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 8px;
	border-radius: var(--rpill, 999px);
	background: var(--bg1);
	border: 1px solid var(--line2);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--fg2);
	margin-bottom: 22px;
}
.oga-hero-network__eyebrow .oga-brand-logo-mark { width: 18px; height: 18px; }

.oga-hero-network__title {
	font-family: var(--display);
	font-size: clamp(28px, 4.6vw, 44px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--fg0);
	margin: 0 0 16px;
}

.oga-hero-network__subtitle {
	font-size: 16px;
	line-height: 1.6;
	color: var(--fg2);
	max-width: 560px;
	margin: 0 auto 30px;
}

.oga-hero-network__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
}

/* Trust-stat row: blunt numbers, no cards — a horizontal rule of figures,
 * the same grammar as a compliance platform's "Total members / Countries /
 * Direct members" band, just quieter than the directory's oga-stat-card. */
.oga-hero-network__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	padding-top: 28px;
	border-top: 1px solid var(--line1);
}
.oga-hero-network__trust-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 24px;
	border-left: 1px solid var(--line1);
}
.oga-hero-network__trust-item:first-child { border-left: none; padding-left: 0; }
.oga-hero-network__trust-item:last-child { padding-right: 0; }

.oga-hero-network__trust-value {
	font-family: var(--display);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}
.oga-hero-network__trust-label {
	font-size: 12px;
	color: var(--fg3);
}


/* ══════════════════════════════════════════════════════════════════════════
 * PARTNER CLOUD · federated-network trust strip
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-partner-cloud {
	padding: 32px 20px;
	text-align: center;
	background: var(--bg1);
	border-bottom: 1px solid var(--line1);
}

.oga-partner-cloud__label {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg3);
	margin: 0 0 18px;
}

.oga-partner-cloud__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 880px;
	margin: 0 auto;
}

.oga-partner-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--r8);
	background: var(--bg0);
	border: 1px solid var(--line1);
	opacity: .72;
	transition: opacity .16s ease, border-color .16s ease;
}
.oga-partner-badge:hover { opacity: 1; border-color: var(--line3); }

.oga-partner-badge__code {
	font-family: var(--display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--gold);
}
.oga-partner-badge__name {
	font-size: 12.5px;
	color: var(--fg2);
}


/* ══════════════════════════════════════════════════════════════════════════
 * FEATURE GRID · plain-language product cards
 * ══════════════════════════════════════════════════════════════════════════ */
.oga-feature-grid-section { padding-block: 8px; }

.oga-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.oga-feature-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	border-radius: var(--r16, 16px);
	background: var(--bg0);
	border: 1px solid var(--line1);
	box-shadow: 0 1px 2px rgba(0,27,74,.04), 0 8px 24px rgba(0,27,74,.03);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oga-feature-card:hover {
	transform: translateY(-3px);
	border-color: var(--line2);
	box-shadow: 0 4px 10px rgba(0,27,74,.06), 0 16px 32px rgba(0,27,74,.07);
}
body.oga-brand-dark .oga-feature-card { box-shadow: none; }
body.oga-brand-dark .oga-feature-card:hover { box-shadow: 0 0 0 1px var(--line2); }

.oga-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r12);
	background: var(--gold-dim);
	color: var(--gold);
}
.oga-feature-card__icon .oga-listing-icon { width: 22px; height: 22px; }

.oga-feature-card__title {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fg0);
	margin: 4px 0 0;
}

.oga-feature-card__desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fg2);
	margin: 0;
}

.oga-feature-card__list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.oga-feature-card__list li {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fg1);
}
.oga-feature-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gold-dim);
	box-shadow: inset 0 0 0 1.5px var(--gold);
}
.oga-feature-card__list li::after {
	content: "";
	position: absolute;
	left: 3.5px;
	top: 8.5px;
	width: 5px;
	height: 2.5px;
	border-left: 1.6px solid var(--gold);
	border-bottom: 1.6px solid var(--gold);
	transform: rotate(-45deg);
}


/* ══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
	.oga-hero-network { padding: 56px 16px 36px; }
	.oga-hero-network__trust { gap: 14px 0; }
	.oga-hero-network__trust-item {
		flex: 1 1 40%;
		border-left: none;
		padding: 10px 0 0;
		border-top: 1px solid var(--line1);
	}
	.oga-hero-network__trust-item:first-child { border-top: none; padding-top: 0; }
	.oga-feature-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * REDUCED MOTION
 * ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.oga-feature-card, .oga-btn, .oga-partner-badge { transition: none; }
	.oga-feature-card:hover { transform: none; }
}