/*
 * OneGetUP — Visual Refresh 0.9.0
 * Capa final para navegación, jerarquía editorial y composición premium.
 * Se carga únicamente fuera de las rutas de comercio.
 */

html {
	scroll-behavior: smooth;
}

/* 1.0.0 — Lenguaje visual unificado para todas las páginas internas. */
.ogu-hub-hero,
.ogu-editorial-hero,
.ogu-blog-hero {
	position: relative;
	padding-block: clamp(4.5rem, 9vw, 8rem);
	overflow: hidden;
	background:
		radial-gradient(circle at 76% 32%, rgb(0 112 255 / 24%), transparent 34%),
		linear-gradient(135deg, #030914 0%, #07172c 56%, #050b16 100%);
}

.ogu-hub-hero::after,
.ogu-editorial-hero::after,
.ogu-blog-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgb(68 155 255 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(68 155 255 / 7%) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.ogu-hub-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr);
	gap: clamp(2rem, 6vw, 7rem);
	align-items: center;
}

.ogu-hub-hero__copy { min-width: 0; }

.ogu-hub-hero__visual {
	position: relative;
	display: block;
	min-height: 27rem;
	overflow: hidden;
	border: 1px solid rgb(105 169 255 / 26%);
	border-radius: clamp(1.25rem, 3vw, 2.5rem);
	box-shadow: 0 2.5rem 8rem rgb(0 0 0 / 48%), 0 0 4rem rgb(0 104 255 / 16%);
}

.ogu-hub-hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgb(0 0 0 / 5%), transparent 45%, rgb(0 107 255 / 12%));
}

.ogu-hub-hero__visual img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
}

.ogu-hub-hero h1,
.ogu-editorial-hero h1,
.ogu-blog-hero h1 {
	max-width: 13ch;
	margin-block: var(--ogu-space-4) var(--ogu-space-6);
	color: #fff;
	font-size: clamp(2.2rem, 4.25vw, 4.5rem);
	line-height: .94;
	letter-spacing: -.065em;
}

.ogu-hub-hero__summary {
	max-width: 48ch;
	color: rgb(235 244 255 / 78%);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
}

@media (max-width: 56rem) {
	.ogu-hub-hero__grid { grid-template-columns: 1fr; }
	.ogu-hub-hero__visual { min-height: 20rem; }
	.ogu-hub-hero h1,
	.ogu-editorial-hero h1,
	.ogu-blog-hero h1 { font-size: clamp(2rem, 8.1vw, 2.5rem); }
}

body {
	background: #f7f9fc;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
}

.ogu-site {
	background: #f7f9fc;
}

.ogu-main {
	overflow: clip;
}

.ogu-section {
	padding-block: clamp(5rem, 8vw, 8.5rem);
}

.ogu-section-heading {
	gap: 1.1rem;
	max-width: 68rem;
	margin-block-end: clamp(2.75rem, 5vw, 5rem);
}

.ogu-section-heading h2,
.ogu-hub-section-heading h2 {
	max-width: 19ch;
	font-size: clamp(2.05rem, 3.25vw, 3.65rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.ogu-eyebrow {
	color: #006dcc;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.ogu-eyebrow::before {
	width: 2.35rem;
	height: 1px;
}

/* Transparent glass navigation. */
.ogu-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--ogu-z-sticky);
	border: 0;
	background: rgb(5 11 20 / 82%);
	box-shadow: 0 1px 0 rgb(255 255 255 / 9%), 0 1.1rem 3rem rgb(3 8 18 / 16%);
	backdrop-filter: blur(22px) saturate(145%);
}

.home .ogu-header {
	position: absolute;
	inset-inline: 0;
	background: linear-gradient(180deg, rgb(5 11 20 / 88%) 0%, rgb(5 11 20 / 42%) 66%, transparent 100%);
	box-shadow: none;
}

.admin-bar .ogu-header {
	inset-block-start: 32px;
}

.home.admin-bar .ogu-header {
	inset-block-start: 0;
}

.ogu-header__inner {
	min-height: 5.75rem;
	gap: clamp(1rem, 2vw, 2rem);
	padding-block: 0.8rem;
}

.ogu-brand__link {
	gap: 0.72rem;
	min-height: 3.25rem;
}

.ogu-brand__logo {
	width: 2.75rem;
	height: 2.75rem;
	object-fit: contain;
}

.ogu-brand__wordmark {
	margin: 0;
	background: none;
	color: #fff;
	font-size: clamp(1.05rem, 1rem + 0.22vw, 1.28rem);
	font-weight: 700;
	letter-spacing: -0.035em;
}

.ogu-header__panel {
	flex: 1;
	justify-content: flex-end;
	gap: 0.6rem;
}

.ogu-nav--primary {
	padding: 0.26rem;
	border: 1px solid rgb(201 208 218 / 15%);
	border-radius: var(--ogu-radius-pill);
	background: rgb(255 255 255 / 5%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.ogu-nav--primary .ogu-nav__list {
	gap: 0.08rem;
}

.ogu-nav--primary a {
	min-height: 2.65rem;
	padding-inline: clamp(0.72rem, 1.05vw, 1rem);
	border-radius: var(--ogu-radius-pill);
	color: #dce7f6;
	font-size: clamp(0.76rem, 0.71rem + 0.12vw, 0.86rem);
	font-weight: 500;
	white-space: nowrap;
	transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.ogu-nav--primary a::before {
	display: none;
}

.ogu-nav--primary a:hover,
.ogu-nav--primary .current-menu-item > a,
.ogu-nav--primary a[aria-current="page"] {
	background: rgb(255 255 255 / 10%);
	color: #fff;
	text-decoration: none;
}

.ogu-nav--primary a:hover {
	transform: translateY(-1px);
}

.ogu-nav--primary .current-menu-item > a,
.ogu-nav--primary a[aria-current="page"] {
	box-shadow: inset 0 0 0 1px rgb(0 178 255 / 34%);
}

.ogu-header__actions {
	gap: 0.55rem;
}

.ogu-header__cta {
	min-height: 3.2rem;
	padding-inline: 1.25rem;
	border: 1px solid rgb(103 215 255 / 42%);
	border-radius: var(--ogu-radius-pill);
	background: linear-gradient(120deg, #0077ff, #00b2ff);
	box-shadow: 0 0.75rem 2.2rem rgb(0 119 255 / 24%), inset 0 1px 0 rgb(255 255 255 / 24%);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 650;
	white-space: nowrap;
}

.ogu-header__cta::after {
	margin-inline-start: 0.55rem;
	content: "↗";
}

.ogu-header__cta:hover {
	background: linear-gradient(120deg, #1685ff, #39c4ff);
	box-shadow: 0 1rem 2.8rem rgb(0 178 255 / 31%);
	color: #fff;
	transform: translateY(-1px);
}

.ogu-header__cart {
	position: relative;
	width: 3.1rem;
	min-width: 3.1rem;
	height: 3.1rem;
	min-height: 3.1rem;
	padding: 0;
	border-color: rgb(122 210 255 / 28%);
	border-radius: 50%;
	background: linear-gradient(145deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 4%));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 13%);
	color: #fff;
}

.ogu-header__cart::before {
	display: none;
	content: none;
}

.ogu-header__cart-icon {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.ogu-header__cart-count {
	position: absolute;
	inset-block-start: -0.32rem;
	inset-inline-end: -0.28rem;
	display: grid;
	place-items: center;
	min-width: 1.28rem;
	height: 1.28rem;
	padding-inline: 0.22rem;
	border: 2px solid #071426;
	border-radius: 999px;
	background: linear-gradient(135deg, #20c7ff, #087cff);
	box-shadow: 0 0.45rem 1.2rem rgb(0 151 255 / 35%);
	color: #fff;
	font-family: var(--ogu-font-mono);
	font-size: 0.63rem;
	font-weight: 700;
	line-height: 1;
}

.ogu-header__cart:hover,
.ogu-header__cart:focus-visible {
	border-color: rgb(0 178 255 / 50%);
	background: rgb(0 178 255 / 10%);
	color: #fff;
}

.ogu-header__toggle {
	border-color: rgb(201 208 218 / 25%);
	border-radius: var(--ogu-radius-pill);
	background: rgb(255 255 255 / 7%);
}

/* Hero: integrate the navigation and strengthen the first impression. */
.home .ogu-hero__inner {
	padding-block-start: clamp(8.5rem, 13vw, 11rem);
}

.ogu-hero {
	background:
		radial-gradient(circle at 78% 30%, rgb(0 178 255 / 12%), transparent 35%),
		linear-gradient(145deg, #050b14 0%, #08162b 55%, #0a1a2f 100%);
}

.ogu-hero__media::after {
	background: linear-gradient(90deg, rgb(5 11 20 / 96%) 0%, rgb(5 11 20 / 82%) 42%, rgb(5 11 20 / 30%) 100%);
}

.ogu-hero__title {
	max-width: 10.5ch;
	font-size: clamp(3.75rem, 6.6vw, 7.2rem);
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.ogu-hero__summary {
	max-width: 47ch;
	color: #c9d6e7;
	font-size: clamp(1.08rem, 1rem + 0.35vw, 1.32rem);
}

.ogu-hero__actions .ogu-button {
	border-radius: var(--ogu-radius-pill);
}

.ogu-hero__actions .ogu-button--primary {
	background: linear-gradient(120deg, #0077ff, #00b2ff);
	box-shadow: 0 1rem 3rem rgb(0 119 255 / 28%);
}

.ogu-hero__actions .ogu-button--ghost {
	border-color: rgb(255 255 255 / 20%);
	background: rgb(255 255 255 / 5%);
	backdrop-filter: blur(12px);
}

/* Keep every dark section readable regardless of OS color mode. */
.ogu-surface-brand,
.ogu-surface-brand :is(h1, h2, h3, h4, p) {
	color: #fff;
}

.ogu-surface-brand :is(.ogu-hero__summary, .ogu-why__intro > p:last-child, .ogu-cta-band__inner > p:not(.ogu-eyebrow)) {
	color: #c9d6e7;
}

/* Services: compact, useful cards with their own visual signal. */
.home .ogu-services-section,
.home .ogu-services-section.ogu-home-section {
	position: relative;
	z-index: 2;
	isolation: isolate;
	background-color: #06111f !important;
	background-image:
		radial-gradient(circle at 82% 16%, rgb(20 120 255 / 18%), transparent 26rem),
		radial-gradient(circle at 15% 84%, rgb(0 202 255 / 8%), transparent 24rem),
		linear-gradient(145deg, #050b15 0%, #071629 52%, #081425 100%) !important;
}

.home .ogu-services-section::before,
.home .ogu-services-section::after {
	display: none !important;
	background: none !important;
	content: none !important;
}

.ogu-services-section > .ogu-container {
	position: relative;
	z-index: 1;
}

.ogu-services-section .ogu-section-heading h2 {
	color: #fff;
}

.ogu-services-section .ogu-eyebrow {
	color: #5bd7ff;
}

.ogu-home .ogu-services-grid,
.ogu-hub--services .ogu-services-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem;
	border: 0;
	background: transparent;
}

.ogu-home .ogu-card-service,
.ogu-hub--services .ogu-card-service,
.ogu-home .ogu-card-service:nth-child(n),
.ogu-hub--services .ogu-card-service:nth-child(n) {
	position: relative;
	grid-column: auto;
	min-height: 18rem;
	overflow: hidden;
	padding: clamp(1.65rem, 2.7vw, 2.5rem);
	border: 1px solid rgb(132 203 255 / 15%);
	border-radius: 1.35rem;
	background:
		radial-gradient(circle at 90% 8%, rgb(0 178 255 / 14%), transparent 7rem),
		linear-gradient(145deg, rgb(255 255 255 / 9%) 0%, rgb(255 255 255 / 3%) 100%);
	box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 7%);
	backdrop-filter: blur(14px);
	transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.ogu-home .ogu-card-service::before,
.ogu-hub--services .ogu-card-service::before {
	position: absolute;
	inset-block-start: 1.35rem;
	inset-inline-end: 1.35rem;
	width: 3.25rem;
	aspect-ratio: 1;
	border: 1px solid rgb(0 119 255 / 20%);
	border-radius: 1rem;
	background:
		linear-gradient(135deg, rgb(0 119 255 / 16%), transparent 55%),
		radial-gradient(circle at center, #00b2ff 0 8%, transparent 10%);
	box-shadow: inset 0 0 0 0.45rem rgb(0 119 255 / 4%);
	content: "";
	transform: rotate(8deg);
}

.ogu-home .ogu-card-service:nth-child(2n)::before,
.ogu-hub--services .ogu-card-service:nth-child(2n)::before {
	border-radius: 50%;
	transform: none;
}

.ogu-home .ogu-card-service:nth-child(3n)::before,
.ogu-hub--services .ogu-card-service:nth-child(3n)::before {
	border-radius: 0.4rem;
	transform: rotate(40deg);
}

.ogu-home .ogu-card-service::after,
.ogu-hub--services .ogu-card-service::after {
	display: none;
}

.ogu-home .ogu-card-service:hover,
.ogu-hub--services .ogu-card-service:hover {
	border-color: rgb(0 119 255 / 30%);
	box-shadow: 0 1.8rem 4.5rem rgb(0 87 198 / 13%);
	transform: translateY(-6px);
}

.ogu-card-service__index {
	position: relative;
	z-index: 1;
	font-size: 0.72rem;
}

.ogu-card-service--editorial h3 {
	max-width: 13ch;
	margin-block-start: auto;
	color: #fff;
	font-size: clamp(1.55rem, 2vw, 2.15rem);
	line-height: 1.02;
}

.ogu-card-service--editorial p {
	color: #b9c9dd;
	font-size: 0.96rem;
	line-height: 1.58;
}

/* El archivo de hubs define las tarjetas de Servicios sobre una superficie
 * clara. Esta variante necesita texto oscuro y una base opaca para conservar
 * contraste, mientras las tarjetas del inicio siguen siendo de vidrio oscuro. */
.ogu-hub--services .ogu-card-service,
.ogu-hub--services .ogu-card-service:nth-child(n) {
	border-color: rgb(7 35 65 / 12%);
	background:
		radial-gradient(circle at 90% 8%, rgb(0 178 255 / 14%), transparent 7rem),
		linear-gradient(145deg, #fff 0%, #edf5fd 100%);
	box-shadow: 0 1.2rem 3rem rgb(6 21 42 / 12%), inset 0 1px 0 rgb(255 255 255 / 82%);
}

.ogu-hub--services .ogu-card-service--editorial h3 {
	color: #071a2f;
}

.ogu-hub--services .ogu-card-service--editorial p {
	color: #52677f;
}

.ogu-section-link a {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding-inline: 1.15rem;
	border: 1px solid #cbd9e9;
	border-radius: var(--ogu-radius-pill);
	background: #fff;
	color: #005fcc;
	text-decoration: none;
}

.ogu-services-section .ogu-section-link a {
	border-color: rgb(91 209 255 / 30%);
	background: rgb(255 255 255 / 8%);
	color: #fff;
}

/* Solutions visual and supporting copy. */
.ogu-home-section--subtle {
	background:
		linear-gradient(180deg, #eef3f9 0%, #f8fafc 100%);
}

.home .ogu-solutions-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 76% 20%, rgb(25 123 255 / 23%), transparent 28rem),
		radial-gradient(circle at 18% 52%, rgb(0 199 255 / 11%), transparent 24rem),
		linear-gradient(145deg, #050b15 0%, #071629 48%, #0b1b31 100%);
}

.home .ogu-solutions-section::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgb(108 199 255 / 5%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(108 199 255 / 5%) 1px, transparent 1px);
	background-size: 5rem 5rem;
	content: "";
	mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 78%, transparent 100%);
}

.ogu-solutions-section .ogu-section-heading h2 {
	color: #fff;
}

.ogu-solutions-section .ogu-eyebrow {
	color: #5dd5ff;
}

.ogu-solutions-showcase {
	max-width: 72rem;
	min-height: clamp(24rem, 50vw, 40rem);
	margin-inline: auto;
	border: 1px solid rgb(132 210 255 / 20%);
	border-radius: clamp(1.35rem, 3vw, 2.4rem);
	box-shadow: 0 3rem 8rem rgb(0 0 0 / 46%), 0 0 4rem rgb(0 126 255 / 13%);
}

.ogu-solutions-showcase picture,
.ogu-solutions-showcase img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogu-solutions-section .ogu-solutions-grid {
	gap: 1rem;
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.ogu-solutions-section .ogu-card-solution {
	padding: clamp(1.5rem, 2.5vw, 2.2rem);
	border: 1px solid rgb(145 207 255 / 16%);
	border-radius: 1.2rem;
	background: linear-gradient(145deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
	backdrop-filter: blur(14px);
}

.ogu-solutions-section .ogu-card-solution h3 {
	color: #fff;
	font-size: clamp(1.65rem, 2.2vw, 2.5rem);
}

.ogu-solutions-section .ogu-card-solution p {
	color: #b9c9dd;
}

.ogu-solutions-section .ogu-card-solution__index,
.ogu-solutions-section .ogu-card-solution__problem::before,
.ogu-solutions-section .ogu-card-solution__outcome::before {
	color: #4ed1ff;
}

.ogu-solutions-section .ogu-section-link a {
	border-color: rgb(91 209 255 / 32%);
	background: rgb(255 255 255 / 8%);
	color: #fff;
}

/* Dark authority section. */
.ogu-why {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 18%, rgb(11 126 255 / 22%), transparent 26rem),
		radial-gradient(circle at 88% 78%, rgb(0 218 255 / 10%), transparent 24rem),
		linear-gradient(135deg, #07111f 0%, #0a1b31 55%, #081425 100%);
}

.ogu-why::before {
	position: absolute;
	inset: 12% 4%;
	z-index: -1;
	border: 1px solid rgb(124 204 255 / 10%);
	border-radius: 2.2rem;
	background: linear-gradient(145deg, rgb(255 255 255 / 5%), transparent 58%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
	content: "";
}

.ogu-why::after {
	display: none !important;
	content: none !important;
}

.ogu-why > .ogu-container {
	gap: clamp(3rem, 8vw, 8rem);
}

.ogu-why__intro h2 {
	font-size: clamp(3rem, 5vw, 5.3rem);
	line-height: 0.96;
}

.ogu-why__list li {
	grid-template-columns: 2.25rem minmax(10rem, 0.8fr) minmax(12rem, 1.2fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 1.8rem;
	border-color: rgb(201 208 218 / 24%);
}

.ogu-why__list h3 {
	font-size: clamp(1.35rem, 1.7vw, 1.8rem);
}

.ogu-why__list p {
	color: #bdcadd;
	line-height: 1.6;
}

/* Process cards: less empty space, more sequence. */
.ogu-process {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgb(3 10 20 / 72%), rgb(4 14 27 / 82%)),
		url("../images/premium/onegetup-process-journey-world-3d-v1.webp") center / cover no-repeat,
		#050d19;
}

.ogu-process::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(4 12 23 / 40%), transparent 18%, transparent 82%, rgb(4 12 23 / 40%));
	content: "";
}

.ogu-process .ogu-section-heading h2 {
	color: #fff;
}

.ogu-process .ogu-eyebrow {
	color: #5bd7ff;
}

.ogu-process__list {
	gap: 1rem;
}

.ogu-process__step,
.ogu-process__step:last-child {
	min-height: 18rem;
	padding: 2rem;
	border: 1px solid rgb(132 203 255 / 17%);
	border-radius: 1.15rem;
	background:
		radial-gradient(circle at 88% 12%, rgb(0 178 255 / 15%), transparent 7rem),
		linear-gradient(160deg, rgb(7 22 40 / 88%) 0%, rgb(5 15 29 / 78%) 100%);
	box-shadow: 0 1.4rem 3.2rem rgb(0 0 0 / 25%), inset 0 1px 0 rgb(255 255 255 / 8%);
	backdrop-filter: blur(16px);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.ogu-process__step:hover {
	border-color: rgb(0 137 231 / 28%);
	box-shadow: 0 2rem 4rem rgb(21 70 130 / 14%), inset 0 1px 0 #fff;
	transform: translateY(-6px);
}

.ogu-process__step::after {
	inset-block-start: 1.85rem;
	inset-inline-start: auto;
	inset-inline-end: 1.85rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	box-shadow: 0 0 0 0.45rem rgb(0 178 255 / 10%);
	transform: none;
}

.ogu-process__step h3 {
	color: #fff;
	font-size: 1.5rem;
}

.ogu-process__step p {
	color: #b9c9dd;
	line-height: 1.6;
}

/* Final CTA and footer become one intentional closing system. */
.ogu-cta-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgb(2 8 17 / 42%), rgb(3 11 22 / 68%)),
		url("../images/premium/onegetup-cta-portal-world-3d-v1.webp") center / cover no-repeat,
		#050d19;
}

.ogu-cta-band::before {
	display: none;
	content: none;
}

/* About page: the feature visual now belongs to the same cinematic world. */
.ogu-editorial-page--about {
	background: linear-gradient(180deg, #071426 0%, #f5f8fc 46rem);
}

.ogu-editorial-page--about .ogu-editorial-media--premium {
	margin-block-start: clamp(-4rem, -5vw, -2rem);
	padding: 0;
	overflow: hidden;
	border: 1px solid rgb(118 202 255 / 20%);
	border-radius: clamp(1.4rem, 3vw, 2.4rem);
	background: #050d19;
	box-shadow: 0 3rem 8rem rgb(0 0 0 / 38%), 0 0 4rem rgb(0 124 255 / 10%);
}

.ogu-editorial-page--about .ogu-editorial-media--premium img {
	display: block;
	width: 100%;
	height: auto;
}

.ogu-about-story {
	background:
		radial-gradient(circle at 85% 25%, rgb(0 151 255 / 8%), transparent 24rem),
		linear-gradient(180deg, #f7f9fc, #eef4fa);
}

.ogu-about-story h2 {
	max-width: 13ch;
	font-size: clamp(2.8rem, 5vw, 5.4rem);
	line-height: 0.98;
	letter-spacing: -0.05em;
}

.ogu-about-story__copy {
	padding-block-start: 3rem;
	color: #36485e;
	line-height: 1.75;
}

.ogu-about-principles {
	background:
		radial-gradient(circle at 82% 18%, rgb(0 151 255 / 14%), transparent 24rem),
		linear-gradient(145deg, #050b15 0%, #071629 50%, #0a1b30 100%);
}

.ogu-about-principles .ogu-hub-section-heading h2,
.ogu-about-principles article h3 {
	color: #fff;
}

.ogu-about-principles article {
	border: 1px solid rgb(126 202 255 / 16%);
	border-radius: 1.35rem;
	background:
		radial-gradient(circle at 90% 10%, rgb(0 178 255 / 13%), transparent 8rem),
		linear-gradient(145deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 1.5rem 3.5rem rgb(0 0 0 / 18%);
}

.ogu-about-principles article > span,
.ogu-contact-brief li > span {
	color: #4ed1ff;
}

.ogu-about-principles article p {
	color: #b9c9dd;
	line-height: 1.65;
}

.ogu-editorial-page--contact {
	background:
		radial-gradient(circle at 88% 22rem, rgb(0 151 255 / 8%), transparent 24rem),
		#f4f7fb;
}

.ogu-contact-intro {
	max-width: 48rem;
	font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.55rem);
	line-height: 1.55;
}

.ogu-contact-brief {
	border: 1px solid rgb(112 161 210 / 18%);
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: 0 1.5rem 4rem rgb(13 42 76 / 8%);
}

.ogu-contact-brief h2 {
	max-width: 15ch;
	font-size: clamp(2.1rem, 3.6vw, 3.7rem);
	line-height: 1;
	letter-spacing: -0.045em;
}

.ogu-contact-brief li {
	border-color: #d9e3ee;
}

.ogu-contact-brief li h3 {
	font-size: 1.2rem;
}

.ogu-contact-brief li p {
	color: #52647a;
	line-height: 1.55;
}

.ogu-contact-card {
	position: sticky;
	inset-block-start: 7rem;
	border: 1px solid rgb(99 195 255 / 18%);
	border-block-start: 3px solid #17bfff;
	border-radius: 1.25rem;
	background: linear-gradient(145deg, #07182b, #091f38);
	box-shadow: 0 1.5rem 4rem rgb(5 22 43 / 18%);
	color: #fff;
}

.ogu-contact-card h2,
.ogu-contact-card a {
	color: #fff;
}

.ogu-contact-card dt {
	color: #63d6ff;
}

.ogu-contact-card dl > div + div {
	border-color: rgb(201 220 240 / 14%);
}

.ogu-contact-form {
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border: 1px solid rgb(112 161 210 / 18%);
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: 0 1.5rem 4rem rgb(13 42 76 / 8%);
}

.ogu-contact-form > h2 {
	max-width: 16ch;
	font-size: clamp(2rem, 3vw, 3.25rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

.ogu-contact-form__intro {
	max-width: 48rem;
	margin-block: 0.75rem 2rem;
	color: #52647a;
	font-size: 1.05rem;
	line-height: 1.6;
}

.ogu-project-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.ogu-field {
	display: grid;
	gap: 0.55rem;
	margin: 0;
}

.ogu-field--wide {
	grid-column: 1 / -1;
}

.ogu-field label,
.ogu-consent {
	color: #0a1d33;
	font-weight: 700;
}

.ogu-field :is(input, select, textarea) {
	width: 100%;
	min-height: 3.2rem;
	padding: 0.85rem 1rem;
	border: 1px solid #c8d5e3;
	border-radius: 0.75rem;
	background: #f8fbff;
	color: #07182b;
	font: inherit;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ogu-field textarea {
	min-height: 10rem;
	resize: vertical;
}

.ogu-field :is(input, select, textarea):focus {
	border-color: #008fe8;
	background: #fff;
	box-shadow: 0 0 0 4px rgb(0 151 255 / 12%);
	outline: 0;
}

.ogu-field small,
.ogu-project-form__required {
	color: #63758a;
	font-size: 0.84rem;
}

.ogu-consent {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-block: 1.5rem;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.55;
}

.ogu-consent input {
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: 0.18rem;
	accent-color: #008fe8;
}

.ogu-project-form__submit {
	min-height: 3.35rem;
	padding: 0.9rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, #087ff5, #22c0ff);
	box-shadow: 0 1rem 2.5rem rgb(0 151 255 / 22%);
	color: #fff;
	font: inherit;
	font-weight: 750;
	cursor: pointer;
	transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.ogu-project-form__submit:hover,
.ogu-project-form__submit:focus-visible {
	filter: brightness(1.07);
	box-shadow: 0 1.2rem 3rem rgb(0 151 255 / 30%);
	transform: translateY(-2px);
}

.ogu-form-notice {
	margin-block-end: 1.5rem;
	padding: 1rem 1.15rem;
	border: 1px solid;
	border-radius: 0.85rem;
	font-weight: 650;
}

.ogu-form-notice--success {
	border-color: #6bc9a0;
	background: #eafaf2;
	color: #14583a;
}

.ogu-form-notice--error {
	border-color: #e7a5a5;
	background: #fff1f1;
	color: #812d2d;
}

.ogu-project-form__trap {
	position: absolute !important;
	inset-inline-start: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 42rem) {
	.ogu-project-form__grid {
		grid-template-columns: 1fr;
	}

	.ogu-field--wide {
		grid-column: auto;
	}
}

.ogu-cta-band::after {
	display: none !important;
	content: none !important;
}

.ogu-cta-band__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 58rem;
	text-align: center;
}

.ogu-cta-band__inner h2 {
	max-width: 13ch;
	font-size: clamp(3rem, 5.6vw, 6rem);
	letter-spacing: -0.05em;
}

.ogu-cta-band__inner > p:not(.ogu-eyebrow) {
	max-width: 48rem;
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
}

.ogu-cta-band .ogu-button,
.ogu-hub-cta .ogu-hub-button--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.5rem;
	padding-inline: 1.6rem;
	border: 1px solid rgb(91 209 255 / 55%);
	margin-block-start: 1.25rem;
	border-radius: var(--ogu-radius-pill);
	background: linear-gradient(120deg, #0077ff, #00b2ff);
	box-shadow: 0 1rem 3rem rgb(0 119 255 / 28%);
	color: #03101e;
	font-weight: 750;
	text-decoration: none;
	transition: filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.ogu-hub-cta .ogu-hub-button--primary:hover,
.ogu-hub-cta .ogu-hub-button--primary:focus-visible {
	filter: brightness(1.08);
	box-shadow: 0 1.2rem 3.4rem rgb(0 178 255 / 38%);
	transform: translateY(-2px);
}

.ogu-footer {
	position: relative;
	padding-block: clamp(3.5rem, 5vw, 5.5rem) 2rem;
	border-block-start: 1px solid rgb(113 199 255 / 12%);
	background:
		radial-gradient(circle at 88% 18%, rgb(0 151 255 / 10%), transparent 22rem),
		linear-gradient(145deg, #050f1d 0%, #07182b 52%, #050e1a 100%);
}

.ogu-footer::before {
	width: min(11rem, 24vw);
	height: 2px;
}

.ogu-footer__columns {
	grid-template-columns: minmax(17rem, 1.45fr) repeat(3, minmax(10rem, 1fr));
	gap: clamp(2.5rem, 5vw, 5rem);
	padding: clamp(2rem, 4vw, 3.5rem);
	border: 1px solid rgb(132 203 255 / 12%);
	border-radius: 1.6rem;
	background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1.5%));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.ogu-footer__brand {
	color: #fff;
	font-size: clamp(2rem, 3vw, 3.2rem);
	letter-spacing: -0.045em;
}

.ogu-footer__tagline,
.ogu-footer__contact-copy {
	max-width: 29rem;
	color: #aebed3;
	line-height: 1.65;
}

.ogu-footer__heading {
	margin-block-end: 1.2rem;
	color: #46c8ff;
	font-size: 0.7rem;
	letter-spacing: 0.17em;
}

.ogu-footer__list li {
	margin: 0;
}

.ogu-footer__list a {
	min-height: 2.35rem;
	color: #dbe5f2;
}

.ogu-footer__list a:hover {
	color: #46c8ff;
	text-decoration: none;
}

.ogu-footer__contact-link {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding-inline: 1rem;
	border: 1px solid rgb(70 200 255 / 38%);
	border-radius: var(--ogu-radius-pill);
	color: #fff;
	text-decoration: none;
}

.ogu-footer__bottom {
	border-color: rgb(201 208 218 / 16%);
	color: #91a2b8;
}

.ogu-nav--legal a {
	min-height: 2.5rem;
	color: #b8c7da;
	font-size: 0.78rem;
}

/* Inner-page heroes and breadcrumbs. */
.ogu-hub-hero,
.ogu-editorial-hero,
.ogu-blog-hero,
.ogu-article-hero {
	padding-block: clamp(7rem, 11vw, 10rem);
}

.ogu-hub-hero :is(h1, h2),
.ogu-editorial-hero :is(h1, h2),
.ogu-blog-hero :is(h1, h2),
.ogu-article-hero :is(h1, h2) {
	color: #fff;
}

.ogu-breadcrumbs {
	padding-block: 0.75rem;
	border-block-end: 1px solid rgb(201 208 218 / 10%);
	background: #071426;
	color: #91a2b8;
	font-size: 0.78rem;
}

.ogu-breadcrumbs a {
	color: #77d7ff;
}

.ogu-breadcrumbs [aria-current="page"] {
	color: #dce7f6;
}

@media (max-width: 1180px) {
	.ogu-nav--primary a {
		padding-inline: 0.62rem;
		font-size: 0.75rem;
	}

	.ogu-header__cta {
		padding-inline: 1rem;
	}
}

@media (max-width: 1023px) {
	.ogu-header,
	.home .ogu-header {
		position: sticky;
		inset-block-start: 0;
		background: rgb(5 11 20 / 92%);
		box-shadow: 0 1px 0 rgb(255 255 255 / 9%);
	}

	.home .ogu-hero__inner {
		padding-block-start: clamp(5.5rem, 10vw, 7rem);
	}

	.ogu-header__panel {
		position: absolute;
		inset-block-start: calc(100% - 0.1rem);
		inset-inline: var(--ogu-gutter);
		align-items: stretch;
		gap: 1rem;
		padding: 1rem;
		border: 1px solid rgb(201 208 218 / 18%);
		border-radius: 1.25rem;
		background: rgb(5 15 29 / 97%);
		box-shadow: 0 2rem 5rem rgb(0 0 0 / 38%);
		backdrop-filter: blur(24px);
	}

	.ogu-nav--primary {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.ogu-header__panel .ogu-nav__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.35rem;
	}

	.ogu-nav--primary a {
		width: 100%;
		min-height: 3rem;
		padding-inline: 0.9rem;
		font-size: 0.95rem;
	}

	.ogu-header__actions {
		padding-block-start: 0.9rem;
		border-block-start: 1px solid rgb(201 208 218 / 14%);
	}

	.ogu-header__cta {
		flex: 1;
	}

	.ogu-home .ogu-services-grid,
	.ogu-hub--services .ogu-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ogu-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.admin-bar .ogu-header {
		inset-block-start: 46px;
	}

	.ogu-section {
		padding-block: 4.5rem;
	}

	.ogu-section-heading h2,
	.ogu-hub-section-heading h2 {
		font-size: clamp(1.65rem, 6.7vw, 2.25rem);
	}

	.ogu-brand__logo {
		width: 2.4rem;
		height: 2.4rem;
	}

	.ogu-header__panel .ogu-nav__list,
	.ogu-home .ogu-services-grid,
	.ogu-hub--services .ogu-services-grid,
	.ogu-footer__columns {
		grid-template-columns: 1fr;
	}

	.ogu-home .ogu-card-service,
	.ogu-hub--services .ogu-card-service,
	.ogu-home .ogu-card-service:nth-child(n),
	.ogu-hub--services .ogu-card-service:nth-child(n) {
		min-height: 15.5rem;
	}

	.ogu-solutions-showcase {
		min-height: 22rem;
	}

	.ogu-why__list li {
		grid-template-columns: 2rem 1fr;
	}

	.ogu-why__list p {
		grid-column: 2;
	}

	.ogu-footer__col--brand {
		padding-block-end: 2rem;
		border-block-end: 1px solid rgb(201 208 218 / 14%);
	}

	.ogu-contact-card {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
	}
}