/* =========================================================================
   MSAOA — Public site design system
   Self-hosted variable fonts, gradient/glow "futuristic tech" treatment,
   scroll-reveal animation hooks (paired with assets/js/site.js), all
   built with plain CSS — no animation/UI framework dependency.
   ========================================================================= */

@font-face {
	font-family: "Inter";
	src: url("../vendor/fonts/inter.woff2") format("woff2-variations"), url("../vendor/fonts/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Space Grotesk";
	src: url("../vendor/fonts/space-grotesk.woff2") format("woff2-variations"), url("../vendor/fonts/space-grotesk.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Brand */
	--ink: #0A0F1E;
	--navy-900: #0A0F1E;
	--navy-800: #0F1B33;
	--navy-700: #16264A;
	--msaoa-primary: #0B2545;
	--msaoa-accent: #2E6EFF;
	--accent-2: #7C3AED;
	--accent-cyan: #22D3EE;
	--msaoa-ink: #131A26;
	--msaoa-muted: #5B6472;

	/* Surfaces */
	--surface: #FFFFFF;
	--surface-alt: #F6F8FC;
	--border-soft: #E5E9F2;

	/* Gradients */
	--gradient-brand: linear-gradient(135deg, var(--msaoa-accent) 0%, var(--accent-2) 100%);
	--gradient-brand-hover: linear-gradient(135deg, #1f57d1 0%, #6a2fd9 100%);
	--gradient-hero: radial-gradient(60% 60% at 15% 20%, rgba(46,110,255,.35) 0%, rgba(46,110,255,0) 60%),
	                  radial-gradient(50% 50% at 85% 15%, rgba(124,58,237,.30) 0%, rgba(124,58,237,0) 60%),
	                  radial-gradient(55% 55% at 75% 85%, rgba(34,211,238,.18) 0%, rgba(34,211,238,0) 60%),
	                  linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);

	/* Motion */
	--ease-out: cubic-bezier(.16,1,.3,1);
	--dur-fast: .2s;
	--dur-med: .45s;

	/* Elevation */
	--shadow-sm: 0 1px 2px rgba(10,15,30,.06);
	--shadow-md: 0 .75rem 2rem rgba(10,15,30,.08);
	--shadow-lg: 0 1.5rem 3.5rem rgba(10,15,30,.14);
	--shadow-glow: 0 0 0 1px rgba(46,110,255,.15), 0 1rem 2.5rem rgba(46,110,255,.18);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--msaoa-ink);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-display {
	font-family: "Space Grotesk", "Inter", sans-serif;
	letter-spacing: -.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 700; }

::selection {
	background: rgba(46,110,255,.22);
}

a {
	text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------------------
   Background textures — pure CSS, no image requests
   ------------------------------------------------------------------------- */

.bg-grid {
	background-image:
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: center top;
}

.bg-dots {
	background-image: radial-gradient(rgba(11,37,69,.14) 1px, transparent 1px);
	background-size: 22px 22px;
}

/* -------------------------------------------------------------------------
   Header / navigation
   ------------------------------------------------------------------------- */

.site-header {
	transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.site-header .navbar {
	background: rgba(255,255,255,.85) !important;
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	transition: box-shadow var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
	padding-top: .85rem;
	padding-bottom: .85rem;
}

.site-header.is-scrolled .navbar {
	box-shadow: var(--shadow-sm);
	padding-top: .55rem;
	padding-bottom: .55rem;
}

.navbar-brand {
	color: var(--msaoa-primary) !important;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.navbar-brand .brand-mark {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--gradient-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	box-shadow: var(--shadow-glow);
}

.nav-link {
	font-weight: 500;
	position: relative;
	color: var(--msaoa-ink) !important;
}

.nav-link::after {
	content: "";
	position: absolute;
	left: .9rem;
	right: .9rem;
	bottom: .1rem;
	height: 2px;
	background: var(--gradient-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-fast) var(--ease-out);
	border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.active::after {
	transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
	font-weight: 600;
	border-radius: .6rem;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.btn-primary {
	background: var(--gradient-brand);
	border: 0;
	box-shadow: var(--shadow-glow);
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--gradient-brand-hover);
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(46,110,255,.2), 0 1.4rem 2.6rem rgba(46,110,255,.28);
	color: #fff;
}

.btn-primary:active {
	transform: translateY(0);
}

.btn-outline-primary {
	color: var(--msaoa-accent);
	border-color: var(--msaoa-accent);
	background: transparent;
}

.btn-outline-primary:hover {
	background: var(--msaoa-accent);
	border-color: var(--msaoa-accent);
	transform: translateY(-2px);
}

.btn-outline-light {
	border-width: 1.5px;
	backdrop-filter: blur(6px);
}

.btn-outline-light:hover {
	transform: translateY(-2px);
}

.btn-lg {
	padding: .8rem 1.6rem;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero-section {
	position: relative;
	background: var(--gradient-hero);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 85%);
	z-index: 0;
}

.hero-section .container {
	position: relative;
	z-index: 1;
}

.hero-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	z-index: 0;
	animation: float-blob 14s var(--ease-out) infinite alternate;
	pointer-events: none;
}

.hero-blob--a {
	width: 380px;
	height: 380px;
	top: -120px;
	right: -80px;
	background: radial-gradient(circle, rgba(46,110,255,.55), transparent 70%);
	animation-delay: 0s;
}

.hero-blob--b {
	width: 300px;
	height: 300px;
	bottom: -100px;
	left: 5%;
	background: radial-gradient(circle, rgba(124,58,237,.5), transparent 70%);
	animation-delay: -6s;
}

.hero-blob--c {
	width: 220px;
	height: 220px;
	top: 30%;
	left: 45%;
	background: radial-gradient(circle, rgba(34,211,238,.35), transparent 70%);
	animation-delay: -3s;
}

@keyframes float-blob {
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(3%, 4%) scale(1.08); }
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .9rem;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(8px);
	font-size: .8rem;
	font-weight: 600;
	color: #cfe0ff;
}

.hero-badge .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-cyan);
	box-shadow: 0 0 8px var(--accent-cyan);
	animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.chip {
	font-size: .78rem;
	font-weight: 600;
	color: rgba(255,255,255,.85);
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	padding: .35rem .8rem;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.chip:hover {
	background: rgba(255,255,255,.14);
	transform: translateY(-1px);
}

.hero-section .lead {
	color: rgba(255,255,255,.82);
}

.hero-section--compact {
	padding-top: 3.25rem;
	padding-bottom: 3.25rem;
}

.hero-section--compact .hero-blob {
	opacity: .35;
}

.section-eyebrow--light {
	color: #9db9ff;
}

.section-eyebrow--light::before {
	background: linear-gradient(135deg, #9db9ff, #c6b3ff);
}

.hero-visual {
	position: relative;
}

.floating-chip {
	position: absolute;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: 50%;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.22);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.3rem;
	box-shadow: var(--shadow-md);
	animation: float-chip 6s ease-in-out infinite;
}

.floating-chip--1 { top: -14px; right: 24px; animation-delay: 0s; }
.floating-chip--2 { bottom: 26px; left: -16px; animation-delay: -2s; }
.floating-chip--3 { top: 42%; right: -16px; animation-delay: -4s; }

@keyframes float-chip {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.floating-chip, .hero-blob { animation: none; }
}

/* -------------------------------------------------------------------------
   Text gradient / eyebrow
   ------------------------------------------------------------------------- */

.text-gradient {
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.section-eyebrow {
	color: var(--msaoa-accent);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .78rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.section-eyebrow::before {
	content: "";
	width: 1.4rem;
	height: 2px;
	background: var(--gradient-brand);
	border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.service-card {
	position: relative;
	border: 1px solid var(--border-soft);
	border-radius: 1rem;
	height: 100%;
	background: var(--surface);
	transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.service-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: var(--gradient-brand);
	opacity: 0;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: opacity var(--dur-med) var(--ease-out);
	pointer-events: none;
}

.service-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
	border-color: transparent;
}

.service-card:hover::before {
	opacity: 1;
}

.service-card .service-icon {
	width: 52px;
	height: 52px;
	border-radius: .8rem;
	background: var(--gradient-brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: var(--shadow-glow);
	transition: transform var(--dur-med) var(--ease-out);
}

.service-card:hover .service-icon {
	transform: scale(1.08) rotate(-4deg);
}

.glass-card {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 1rem;
}

/* -------------------------------------------------------------------------
   Process / steps
   ------------------------------------------------------------------------- */

.process-steps {
	position: relative;
	counter-reset: step;
}

.process-step {
	position: relative;
	padding-left: 3.25rem;
	padding-bottom: 2rem;
}

.process-step:last-child {
	padding-bottom: 0;
}

.process-step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: #fff;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-glow);
	z-index: 1;
}

.process-step::after {
	content: "";
	position: absolute;
	left: 1.19rem;
	top: 2.4rem;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, rgba(46,110,255,.4), rgba(124,58,237,.05));
}

.process-step:last-child::after {
	display: none;
}

/* -------------------------------------------------------------------------
   Icon badges (generic, used outside service cards too)
   ------------------------------------------------------------------------- */

.icon-badge {
	width: 3rem;
	height: 3rem;
	border-radius: .75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}

.icon-badge--solid {
	background: var(--gradient-brand);
	color: #fff;
	box-shadow: var(--shadow-glow);
}

.icon-badge--soft {
	background: rgba(46,110,255,.1);
	color: var(--msaoa-accent);
}

/* -------------------------------------------------------------------------
   Scroll-reveal animation hooks (JS toggles .is-visible; see site.js)
   ------------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .4s; }
.reveal-delay-6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   FAQ accordion (service detail pages)
   ------------------------------------------------------------------------- */

.accordion-item {
	border: 1px solid var(--border-soft);
	border-radius: .75rem !important;
	overflow: hidden;
	margin-bottom: .6rem;
}

.accordion-button {
	font-weight: 600;
	font-family: "Space Grotesk", sans-serif;
	background: var(--surface);
}

.accordion-button:not(.collapsed) {
	background: var(--surface-alt);
	color: var(--msaoa-primary);
	box-shadow: none;
}

.accordion-button:focus {
	box-shadow: 0 0 0 .2rem rgba(46,110,255,.15);
}

.accordion-button::after {
	background-image: none;
	content: "\F282";
	font-family: "bootstrap-icons" !important;
	font-size: 1rem;
	transition: transform var(--dur-fast) var(--ease-out);
	color: var(--msaoa-accent);
}

.accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	background: var(--navy-900) !important;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gradient-brand);
}

.site-footer a {
	color: rgba(255,255,255,.65);
	transition: color var(--dur-fast) var(--ease-out);
}

.site-footer a:hover {
	color: #fff;
}

.social-icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	color: #fff !important;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.social-icon:hover {
	background: var(--gradient-brand);
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Misc utility
   ------------------------------------------------------------------------- */

.demo-content-notice {
	background: #fff7e6;
	border: 1px solid #ffe1a8;
	color: #6b4d00;
	border-radius: .5rem;
	padding: .5rem 1rem;
	font-size: .85rem;
}

.section-divider-glow {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(46,110,255,.35), transparent);
	border: 0;
}

.stat-figure {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 2.2rem;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.page-content h2 {
	margin-top: 2rem;
	font-size: 1.5rem;
}

.page-content h2:first-child {
	margin-top: 0;
}

.page-content ul li,
.page-content ol li {
	margin-bottom: .4rem;
}

/* -------------------------------------------------------------------------
   Breadcrumb bar
   ------------------------------------------------------------------------- */

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--msaoa-muted);
}

.breadcrumb a {
	color: var(--msaoa-muted);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--msaoa-accent);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.hero-section h1 {
		font-size: 3.25rem;
	}
}

@media (max-width: 767.98px) {
	.hero-blob { display: none; }
}