/* ==========================================================================
   MySquadron public landing page
   Layered on top of Bootstrap 5.3.3. Dark-forward, single committed theme.
   ========================================================================== */

:root {
	--ms-bg:        #0b0d10;
	--ms-surface:   #14181f;
	--ms-surface-2: #1b212b;
	--ms-line:      rgba(255, 255, 255, .10);
	--ms-text:      #e8ecf2;
	--ms-muted:     #98a2b3;
	--ms-accent:    #4c8dff;
	--ms-accent-2:  #7c5cff;
	--ms-nav-h:     68px;
}

/* --------------------------------------------------------- base ---- */

html {
	scroll-behavior: smooth;
	/* Keep anchored sections clear of the fixed navbar. */
	scroll-padding-top: var(--ms-nav-h);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	background-color: var(--ms-bg);
	color: var(--ms-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.ms-display {
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.08;
}

.ms-muted { color: var(--ms-muted); }

/* Small uppercase section label sitting above each heading. */
.ms-eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ms-accent);
	margin-bottom: .75rem;
}

.ms-rule {
	width: 3.5rem;
	height: 3px;
	border: 0;
	border-radius: 3px;
	opacity: 1;
	background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-2));
}

/* ------------------------------------------------------- navbar ---- */

.ms-nav {
	min-height: var(--ms-nav-h);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

/* .is-stuck is toggled from JS once the page scrolls off the hero. */
.ms-nav.is-stuck {
	background: rgba(11, 13, 16, .85);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--ms-line);
}

/* The collapsed mobile menu needs a solid backdrop regardless of scroll. */
@media (max-width: 991.98px) {
	.ms-nav:has(.navbar-collapse.show),
	.ms-nav:has(.navbar-collapse.collapsing) {
		background: rgba(11, 13, 16, .97);
		backdrop-filter: blur(12px);
	}
}

.ms-nav .navbar-brand {
	font-weight: 700;
	letter-spacing: -.01em;
}

.ms-nav .nav-link {
	color: var(--ms-muted);
	font-weight: 500;
	position: relative;
	transition: color .2s ease;
}

.ms-nav .nav-link:hover,
.ms-nav .nav-link:focus-visible,
.ms-nav .nav-link.active {
	color: var(--ms-text);
}

/* Underline grows from the centre on hover / scrollspy activation. */
@media (min-width: 992px) {
	.ms-nav .nav-link::after {
		content: "";
		position: absolute;
		left: 50%;
		right: 50%;
		bottom: .25rem;
		height: 2px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-2));
		transition: left .2s ease, right .2s ease;
	}

	.ms-nav .nav-link:hover::after,
	.ms-nav .nav-link.active::after {
		left: .5rem;
		right: .5rem;
	}
}

.navbar-toggler:focus { box-shadow: none; }

/* -------------------------------------------------------- hero ----- */

.ms-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: calc(var(--ms-nav-h) + 3rem) 0 4rem;
	background-image:
		linear-gradient(rgba(11, 13, 16, .55), rgba(11, 13, 16, .88) 55%, var(--ms-bg) 100%),
		url("../images/bg-masthead2.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Soft accent bloom behind the headline. */
.ms-hero::before {
	content: "";
	position: absolute;
	top: 18%;
	left: 50%;
	width: min(900px, 120vw);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(76, 141, 255, .18), transparent 62%);
	pointer-events: none;
}

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

.ms-hero-logo {
	max-width: min(340px, 72vw);
	height: auto;
}

.ms-hero h1 {
	font-size: clamp(2.6rem, 7vw, 4.75rem);
	text-transform: uppercase;
}

.ms-hero-sub {
	max-width: 44ch;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	color: var(--ms-muted);
}

/* Reassurance chips under the hero CTAs. */
.ms-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .4rem .85rem;
	font-size: .85rem;
	color: var(--ms-muted);
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--ms-line);
	border-radius: 999px;
}

.ms-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
	color: var(--ms-muted);
	font-size: 1.25rem;
	animation: ms-bob 2.4s ease-in-out infinite;
}

@keyframes ms-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
	.ms-scroll-cue { animation: none; }
}

/* ------------------------------------------------------ buttons ---- */

.btn-ms {
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: .75rem;
	--bs-btn-font-weight: 600;
	--bs-btn-color: #fff;
	--bs-btn-border-color: transparent;
	background: linear-gradient(135deg, var(--ms-accent), var(--ms-accent-2));
	box-shadow: 0 8px 24px rgba(76, 141, 255, .28);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-ms:hover,
.btn-ms:focus-visible {
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(76, 141, 255, .38);
}

.btn-ms-ghost {
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: .75rem;
	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--ms-text);
	--bs-btn-border-color: var(--ms-line);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 255, 255, .07);
	--bs-btn-hover-border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .03);
	transition: transform .18s ease;
}

.btn-ms-ghost:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.btn-ms:hover, .btn-ms-ghost:hover { transform: none; }
}

/* ----------------------------------------------------- sections ---- */

.ms-section { padding: clamp(4rem, 9vw, 7rem) 0; }

.ms-section-alt {
	background: linear-gradient(180deg, var(--ms-bg), var(--ms-surface) 50%, var(--ms-bg));
}

/* ------------------------------------------------ feature cards ---- */

.ms-card {
	height: 100%;
	padding: 2rem 1.75rem;
	background: var(--ms-surface);
	border: 1px solid var(--ms-line);
	border-radius: 1rem;
	transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

.ms-card:hover {
	transform: translateY(-4px);
	border-color: rgba(76, 141, 255, .45);
	background: var(--ms-surface-2);
}

@media (prefers-reduced-motion: reduce) {
	.ms-card:hover { transform: none; }
}

.ms-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.15rem;
	font-size: 1.25rem;
	color: var(--ms-accent);
	background: rgba(76, 141, 255, .12);
	border: 1px solid rgba(76, 141, 255, .25);
	border-radius: .75rem;
}

.ms-card h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: .6rem;
}

.ms-card p {
	color: var(--ms-muted);
	font-size: .95rem;
	margin-bottom: 0;
}

/* Marks a card describing something not yet shipped. */
.ms-card-soon {
	display: inline-block;
	margin-left: .5rem;
	padding: .1rem .5rem;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	vertical-align: middle;
	color: var(--ms-muted);
	border: 1px solid var(--ms-line);
	border-radius: 999px;
}

/* --------------------------------------------------- pull quote ---- */

.ms-quote {
	position: relative;
	background:
		linear-gradient(rgba(11, 13, 16, .78), rgba(11, 13, 16, .93)),
		url("../images/david_goldfein.jpg") center 22% / cover no-repeat;
}

.ms-quote blockquote {
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.ms-quote cite {
	display: block;
	margin-top: 1.25rem;
	font-size: .9rem;
	font-style: normal;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ms-muted);
}

/* ---------------------------------------------------- security ----- */

.ms-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ms-list li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .85rem;
	color: var(--ms-muted);
}

.ms-list li::before {
	content: "\f00c";                    /* fa-check */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: .1rem;
	font-size: .85rem;
	color: var(--ms-accent);
}

/* ------------------------------------------------------ footer ----- */

.ms-footer {
	padding: 4rem 0 2rem;
	background: #07090b;
	border-top: 1px solid var(--ms-line);
	font-size: .9rem;
}

.ms-footer h5 {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ms-text);
	margin-bottom: 1rem;
}

.ms-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ms-footer li { margin-bottom: .55rem; }

.ms-footer a {
	color: var(--ms-muted);
	text-decoration: none;
	transition: color .2s ease;
}

.ms-footer a:hover,
.ms-footer a:focus-visible { color: var(--ms-accent); }

.ms-footer-base {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ms-line);
	color: #5b6572;
}

/* --------------------------------------------- scroll reveal ------- */

/* JS adds .ms-reveal, so no-JS visitors are never left with hidden content. */
.ms-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
}

.ms-reveal.is-visible {
	opacity: 1;
	transform: none;
}

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