/* ============================================================
   OPENPEDIA AI — DESIGN TOKENS
   ============================================================ */
:root {
	--navy-950: #071527;
	--navy-900: #0A1E38;
	--navy-800: #0E2A4E;
	--navy-700: #13376A;
	--ink: #12294A;
	--slate: #495A70;
	--muted: #6B7C92;
	--teal: #0FA5B2;
	--teal-deep: #0B8894;
	--cyan: #38D8D4;
	--cyan-soft: #DFF6F7;
	--blue: #1E88E5;
	--blue-soft: #E3F0FC;
	--bg: #FFFFFF;
	--tint: #F3F7FB;
	--tint-2: #EAF1F8;
	--line: #E1EAF2;
	--line-2: #CFDDE9;
	--cap: #0066CC;
	--adp: #fdd500;
	--ope: #b941ff;
	--lea: #6D3CC6;
	--r-lg: 18px;
	--r-md: 14px;
	--r-sm: 10px;
	--sh-sm: 0 1px 2px rgba(10, 30, 56, .05), 0 4px 14px rgba(10, 30, 56, .06);
	--sh-md: 0 2px 6px rgba(10, 30, 56, .05), 0 10px 30px rgba(10, 30, 56, .10);
	--sh-lg: 0 8px 40px rgba(10, 30, 56, .14);
	--maxw: 1180px;
	--font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
	--font-body: sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

html {
	scroll-behavior: smooth
}

body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--slate);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%
}

a {
	color: var(--teal-deep);
	text-decoration: none
}

a:hover {
	text-decoration: underline
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	color: var(--ink);
	line-height: 1.18;
	letter-spacing: -.015em
}

:focus-visible {
	outline: 3px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 6px
}

.container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 28px
}

section {
	scroll-margin-top: 92px
}

.section {
	padding: clamp(72px, 9vw, 116px) 0
}

.section--tint {
	background: linear-gradient(180deg, var(--tint) 0%, #FAFCFE 100%)
}

/* Eyebrow + section headers — the dotted "provenance thread" motif */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--teal-deep);
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.eyebrow::before {
	content: "";
	width: 34px;
	height: 0;
	border-top: 2px dotted var(--teal);
}

.section-head {
	max-width: 720px;
	margin-bottom: clamp(36px, 5vw, 56px)
}

.section-head h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
	margin-bottom: 14px
}

.section-head p {
	font-size: 18px;
	color: var(--slate)
}

.section-head--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center
}

.section-head--center .eyebrow {
	justify-content: center
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15.5px;
	padding: 14px 26px;
	border-radius: 12px;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1.5px)
}

.btn:active {
	transform: translateY(0)
}

.btn-primary {
	background: var(--navy-900);
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(10, 30, 56, .22)
}

.btn-primary:hover {
	background: var(--navy-800);
	box-shadow: 0 10px 26px rgba(10, 30, 56, .28)
}

.btn-ghost {
	background: #fff;
	color: var(--ink);
	border-color: var(--line-2)
}

.btn-ghost:hover {
	border-color: var(--navy-800);
	box-shadow: var(--sh-sm)
}

.btn-teal {
	background: linear-gradient(135deg, #17B6B6, #0E9DAF);
	color: #fff;
	box-shadow: 0 8px 24px rgba(14, 157, 175, .38)
}

.btn-teal:hover {
	box-shadow: 0 12px 30px rgba(14, 157, 175, .48)
}

.btn .arrow {
	transition: transform .18s ease
}

.btn:hover .arrow {
	transform: translateX(3px)
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, box-shadow .25s ease;
}

.nav.scrolled {
	border-bottom-color: var(--line);
	box-shadow: 0 6px 24px rgba(10, 30, 56, .06)
}

.nav-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 28px;
	height: 74px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none
}

.brand:hover {
	text-decoration: none
}

.brand-logo {
	width: auto;
	height: 38px;
	display: block
}

.brand-logo--footer {
	height: 34px
}

.brand-word {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 21px;
	color: var(--ink);
	letter-spacing: -.02em
}

.brand-word em {
	font-style: normal;
	color: var(--teal-deep)
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	list-style: none
}

.nav-links a {
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	padding: 9px 14px;
	border-radius: 9px;
	transition: background .15s ease, color .15s ease;
}

.nav-links a:hover {
	background: var(--tint);
	text-decoration: none
}

.nav-links a.active {
	color: var(--teal-deep);
	background: var(--cyan-soft)
}

.nav-cta {
	margin-left: 8px
}

.nav .btn {
	padding: 11px 20px;
	font-size: 14.5px
}

.nav-toggle {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--line-2);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.nav-toggle svg {
	width: 20px;
	height: 20px;
	stroke: var(--ink)
}

.mobile-menu {
	display: none;
	position: fixed;
	top: 74px;
	left: 0;
	right: 0;
	z-index: 79;
	background: #fff;
	border-bottom: 1px solid var(--line);
	box-shadow: var(--sh-md);
	padding: 14px 28px 26px;
}

.mobile-menu.open {
	display: block
}

.mobile-menu a {
	display: block;
	padding: 13px 6px;
	font-weight: 600;
	font-size: 16.5px;
	color: var(--ink);
	border-bottom: 1px solid var(--tint-2)
}

.mobile-menu a:hover {
	text-decoration: none;
	color: var(--teal-deep)
}

.mobile-menu .btn {
	margin-top: 18px;
	width: 100%
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
	position: relative;
	padding: 158px 0 150px;
	background:
		radial-gradient(900px 480px at 86% 4%, rgba(56, 216, 212, .13), transparent 62%),
		radial-gradient(700px 420px at 4% 30%, rgba(30, 136, 229, .07), transparent 60%),
		linear-gradient(180deg, #F5F9FC 0%, #FDFEFF 78%, #FFFFFF 100%);
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	color: var(--navy-800)
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.04fr .96fr;
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.hero h1 {
	font-size: clamp(34px, 4.6vw, 58px);
	font-weight: 800;
	letter-spacing: -.025em;
	color: var(--navy-900);
	margin-bottom: 22px;
}

.hero h1 .accent {
	background: linear-gradient(120deg, var(--teal-deep), var(--blue));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-sub {
	font-size: 19px;
	max-width: 520px;
	margin-bottom: 34px
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px
}

.hero-note {
	margin-top: 26px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 9px;
	letter-spacing: .02em;
}

.hero-note .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 0 4px rgba(56, 216, 212, .18)
}

/* --- Signature: the grounding stack ------------------------ */
.stack-wrap {
	position: relative;
	padding-right: 104px
}

.stack {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px
}

.stack::before {
	/* dotted spine on the left, echoing provenance */
	content: "";
	position: absolute;
	left: -22px;
	top: 34px;
	bottom: 34px;
	border-left: 2px dotted var(--line-2);
}

.layer {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 18px;
	box-shadow: var(--sh-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.layer:hover {
	transform: translateX(4px);
	box-shadow: var(--sh-md);
	border-color: var(--line-2)
}

.layer::before {
	/* node on the spine */
	content: "";
	position: absolute;
	left: -27.5px;
	top: 50%;
	transform: translateY(-50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--teal);
}

.layer-icon {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.layer-icon svg {
	width: 26px;
	height: 26px
}

.li-blue {
	background: var(--blue-soft);
	color: var(--blue)
}

.li-cyan {
	background: var(--cyan-soft);
	color: var(--teal-deep)
}

.li-teal {
	background: #E0F5F0;
	color: #0C9C86
}

.li-navy {
	background: #E8EEF7;
	color: var(--navy-700)
}

.layer h3 {
	font-size: 16.5px;
	font-weight: 700;
	margin-bottom: 3px
}

.layer p {
	font-size: 13.8px;
	line-height: 1.5;
	color: var(--slate)
}

.stack-connector {
	position: absolute;
	top: 0;
	right: 0;
	width: 104px;
	height: 100%;
	color: var(--teal)
}

.stack-connector .trace {
	stroke: currentColor;
	stroke-width: 2;
	stroke-dasharray: 2.5 6;
	stroke-linecap: round;
	fill: none;
	opacity: .85
}

.lock-badge {
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translate(0, -50%);
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--sh-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teal-deep);
}

.lock-badge svg {
	width: 30px;
	height: 30px
}

.lock-badge::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 2px dashed rgba(15, 165, 178, .5);
	animation: orbit 26s linear infinite;
}

@keyframes orbit {
	to {
		transform: rotate(360deg)
	}
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-shell {
	margin-top: -64px;
	position: relative;
	z-index: 5
}

.stats {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: var(--sh-md);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.stat {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 26px 28px;
	border-right: 1px solid var(--tint-2);
}

.stat:last-child {
	border-right: none
}

.stat-icon {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--cyan-soft);
	color: var(--teal-deep);
	display: flex;
	align-items: center;
	justify-content: center;
}

.stat-icon svg {
	width: 23px;
	height: 23px
}

.stat-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	color: var(--navy-900);
	line-height: 1.1
}

.stat-label {
	font-size: 13.5px;
	color: var(--slate);
	line-height: 1.4;
	margin-top: 2px
}

/* ============================================================
   WHY OPENPEDIA
   ============================================================ */
.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.why-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 34px 24px 30px;
	text-align: center;
	box-shadow: var(--sh-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

.why-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md)
}

.why-icon {
	width: 66px;
	height: 66px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #FFFFFF, var(--cyan-soft));
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teal-deep);
}

.why-icon svg {
	width: 29px;
	height: 29px
}

.why-card h3 {
	font-size: 17.5px;
	font-weight: 700;
	margin-bottom: 10px
}

.why-card p {
	font-size: 14.3px;
	line-height: 1.6
}

/* ============================================================
   SOLUTIONS & DEPLOYMENTS
   ============================================================ */
.prod-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.prod {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 30px 24px 24px;
	box-shadow: var(--sh-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}

.prod:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md)
}

.prod::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--pc, var(--teal))
}

.prod-cap {
	--pc: var(--cap)
}

.prod-adp {
	--pc: var(--adp)
}

.prod-ope {
	--pc: var(--ope)
}

.prod-lea {
	--pc: var(--lea)
}

.prod-mark {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 800;
	font-size: 23px;
	color: #0066CC;
	background: #fbfcfd;
}

.prod-mark--img {
	background: none;
	overflow: hidden;
}

.prod-mark--img img {
	width: 100%;
	/* height: 100%; */
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

.prod h3 {
	font-size: 19.5px;
	font-weight: 700;
	margin-bottom: 8px
}

.prod p {
	font-size: 14.3px;
	line-height: 1.6;
	flex: 1
}

.prod-foot {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px
}

.chip-live {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #0C7D6C;
	background: #E3F6F0;
	border: 1px solid #C4EBE0;
	padding: 4px 9px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.chip-live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #12B27E
}

.prod-link {
	font-size: 13.8px;
	font-weight: 600;
	color: var(--teal-deep);
	white-space: nowrap
}

.prod-note {
	font-size: 13.8px;
	color: var(--muted);
	white-space: nowrap
}

/* ============================================================
   TECHNOLOGY — the grounding stack, unrolled
   ============================================================ */
.pipeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 8px
}

.pipeline::before {
	content: "";
	position: absolute;
	top: 30px;
	left: 5%;
	right: 5%;
	border-top: 2px dotted var(--line-2);
	z-index: 0;
}

.step {
	position: relative;
	z-index: 1;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 22px;
	box-shadow: var(--sh-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}

.step:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md)
}

.step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px
}

.step-num {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--teal-deep);
	background: var(--cyan-soft);
	border: 1px solid #C8ECEE;
	padding: 4px 10px;
	border-radius: 999px;
}

.step-icon {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center
}

.step-icon svg {
	width: 21px;
	height: 21px
}

.step h3 {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 10px
}

.step ul {
	list-style: none
}

.step li {
	position: relative;
	font-size: 13.8px;
	line-height: 1.5;
	color: var(--slate);
	padding: 5px 0 5px 20px;
	border-top: 1px dashed var(--tint-2);
}

.step li:first-child {
	border-top: none
}

.step li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 13px;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--cyan);
	opacity: .85;
}

.step-flow {
	display: none;
	text-align: center;
	color: var(--line-2);
	margin: -6px 0
}

/* ============================================================
   DEPLOYMENT & TRUST
   ============================================================ */
.deploy-grid {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	gap: clamp(36px, 5vw, 64px);
	align-items: center
}

.feature {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px dashed var(--tint-2)
}

.feature:last-child {
	border-bottom: none
}

.feature-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--sh-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teal-deep);
}

.feature-icon svg {
	width: 22px;
	height: 22px
}

.feature h3 {
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 3px
}

.feature p {
	font-size: 14.2px;
	line-height: 1.55
}

.diagram {
	background: linear-gradient(180deg, #F5F9FC, #EFF5FA);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 26px;
	box-shadow: var(--sh-sm);
}

.flow {
	display: grid;
	grid-template-columns: 1fr 34px 1fr 34px 1fr;
	gap: 10px;
	align-items: stretch
}

.node {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 16px 14px;
	box-shadow: var(--sh-sm);
}

.node-title {
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 12px;
}

.node-row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.2px;
	font-weight: 600;
	color: var(--ink);
	padding: 8px 9px;
	border: 1px solid var(--tint-2);
	border-radius: 9px;
	background: #FBFDFE;
}

.node-row+.node-row {
	margin-top: 8px
}

.node-row svg {
	width: 16px;
	height: 16px;
	color: var(--teal-deep);
	flex: none
}

.node--secure {
	background: var(--navy-900);
	border-color: var(--navy-900)
}

.node--secure .node-title {
	color: #8FB4D6
}

.node--secure .node-row {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: #EAF4FA
}

.node--secure .node-row svg {
	color: var(--cyan)
}

.node--secure .lockline {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
	color: var(--cyan)
}

.node--secure .lockline svg {
	width: 22px;
	height: 22px
}

.flow-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--teal)
}

.flow-link svg {
	width: 34px;
	height: 16px
}

.tenant {
	margin-top: 14px;
	border: 2px dashed rgba(15, 165, 178, .55);
	border-radius: 14px;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--teal-deep);
	background: rgba(223, 246, 247, .5);
}

.tenant svg {
	width: 17px;
	height: 17px
}

.trust-chips {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 9px
}

.tchip {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--navy-800);
	background: #fff;
	border: 1px solid var(--line-2);
	padding: 7px 12px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.tchip svg {
	width: 13px;
	height: 13px;
	color: var(--teal-deep)
}

/* ============================================================
   LEADERSHIP
   ============================================================ */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.person {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 32px 22px 26px;
	text-align: center;
	box-shadow: var(--sh-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform .2s ease, box-shadow .2s ease;
}

.person:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md)
}

.avatar {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 27px;
	color: #fff;
	box-shadow: inset 0 -10px 22px rgba(7, 21, 39, .25), 0 8px 20px rgba(10, 30, 56, .18);
}

.av-1 {
	background: linear-gradient(140deg, #12325E, #1E5FA8)
}

.av-2 {
	background: linear-gradient(140deg, #0B8894, #2BC7BD)
}

.av-3 {
	background: linear-gradient(140deg, #4A44C4, #7A6CF0)
}

.av-4 {
	background: linear-gradient(140deg, #0E2A4E, #3D6FB3)
}

.person h3 {
	font-size: 18px;
	font-weight: 700
}

.person .role {
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal-deep);
	margin: 6px 0 10px;
}

.person .focus {
	font-size: 13.8px;
	line-height: 1.58;
	margin-bottom: 14px
}

.person .li-link {
	margin-top: auto;
	display: inline-flex;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--tint);
	border: 1px solid var(--line);
	align-items: center;
	justify-content: center;
	color: var(--navy-700);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13.5px;
	transition: background .15s ease, color .15s ease;
}

.person .li-link:hover {
	background: var(--navy-900);
	color: #fff;
	text-decoration: none
}

.team-note {
	margin-top: 26px;
	text-align: center;
	font-size: 14.5px;
	color: var(--muted);
}

/* ============================================================
   INSIGHTS
   ============================================================ */
.insight-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.insight {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 26px 24px 22px;
	box-shadow: var(--sh-sm);
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}

.insight:hover {
	transform: translateY(-5px);
	box-shadow: var(--sh-md)
}

.itag {
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.itag-teal {
	color: #0B7D89;
	background: var(--cyan-soft)
}

.itag-navy {
	color: var(--navy-700);
	background: #E8EEF7
}

.itag-amber {
	color: #9A6206;
	background: #FDF1DC
}

.insight h3 {
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.32;
	margin-bottom: 10px
}

.insight p {
	font-size: 14.3px;
	line-height: 1.6;
	flex: 1
}

.insight .read {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--teal-deep)
}

/* ============================================================
   CTA BAND + FOOTER
   ============================================================ */
.cta-band {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(800px 400px at 88% 120%, rgba(56, 216, 212, .22), transparent 60%),
		linear-gradient(120deg, var(--navy-950) 0%, var(--navy-800) 100%);
	padding: clamp(64px, 8vw, 96px) 0;
}

.cta-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	color: var(--cyan)
}

.cta-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 110px 1fr auto;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.cta-mark {
	color: var(--cyan);
	opacity: .95
}

.cta-band h2 {
	color: #fff;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	margin-bottom: 10px;
	letter-spacing: -.015em
}

.cta-band p {
	color: #B9CDE0;
	font-size: 16.5px;
	max-width: 560px
}

.cta-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px
}

.cta-mail {
	font-family: var(--font-mono);
	font-size: 13px;
	color: #8FB4D6
}

.cta-mail a {
	color: var(--cyan)
}

.footer {
	background: var(--navy-950);
	color: #A9BFD4;
	padding: 64px 0 0
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 52px
}

.footer .brand-word {
	color: #fff
}

.footer .brand-word em {
	color: var(--cyan)
}

.footer-tag {
	margin-top: 14px;
	font-size: 14.2px;
	line-height: 1.6;
	max-width: 300px;
	color: #8CA5BD
}

.footer h4 {
	color: #fff;
	font-size: 13px;
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 16px
}

.footer ul {
	list-style: none
}

.footer li {
	margin-bottom: 10px
}

.footer a {
	color: #A9BFD4;
	font-size: 14.5px
}

.footer a:hover {
	color: var(--cyan);
	text-decoration: none
}

.footer-bar {
	border-top: 1px solid rgba(255, 255, 255, .09);
	padding: 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	font-size: 13px;
	color: #7D95AC;
}

/* ============================================================
   REVEAL MOTION
   ============================================================ */
.js .reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1)
}

.js .reveal.in {
	opacity: 1;
	transform: none
}

.js .reveal-d1 {
	transition-delay: .08s
}

.js .reveal-d2 {
	transition-delay: .16s
}

.js .reveal-d3 {
	transition-delay: .24s
}

.js .reveal-d4 {
	transition-delay: .32s
}

.js .stack .layer {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s ease, transform .6s ease
}

.js .stack.in .layer {
	opacity: 1;
	transform: none
}

.js .stack.in .layer:nth-child(1) {
	transition-delay: .15s
}

.js .stack.in .layer:nth-child(2) {
	transition-delay: .3s
}

.js .stack.in .layer:nth-child(3) {
	transition-delay: .45s
}

.js .stack.in .layer:nth-child(4) {
	transition-delay: .6s
}

.js .stack-connector,
.js .lock-badge {
	opacity: 0;
	transition: opacity .8s ease .85s
}

.js .stack.in~.stack-connector,
.js .stack.in~.lock-badge {
	opacity: 1
}

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

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important
	}

	.js .reveal,
	.js .stack .layer {
		opacity: 1 !important;
		transform: none !important
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {

	.why-grid,
	.prod-grid,
	.team-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.pipeline {
		grid-template-columns: repeat(2, 1fr)
	}

	.pipeline::before {
		display: none
	}

	.stats {
		grid-template-columns: repeat(2, 1fr)
	}

	.stat:nth-child(2) {
		border-right: none
	}

	.stat:nth-child(1),
	.stat:nth-child(2) {
		border-bottom: 1px solid var(--tint-2)
	}
}

@media (max-width:980px) {
	.hero {
		padding-top: 138px;
		padding-bottom: 120px
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 64px
	}

	.hero-sub {
		max-width: 640px
	}

	.stack-wrap {
		max-width: 620px;
		margin: 0 auto;
		width: 100%
	}

	.deploy-grid {
		grid-template-columns: 1fr
	}

	.cta-grid {
		grid-template-columns: 1fr;
		text-align: left
	}

	.cta-mark {
		display: none
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}
}

@media (max-width:900px) {

	.nav-links,
	.nav-cta {
		display: none
	}

	.nav-toggle {
		display: flex
	}

	.insight-grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:720px) {
	body {
		font-size: 16px
	}

	.flow {
		grid-template-columns: 1fr
	}

	.flow-link {
		transform: rotate(90deg);
		padding: 2px 0
	}

	.stack-wrap {
		padding-right: 0
	}

	.stack-connector,
	.lock-badge {
		display: none
	}

	.step-flow {
		display: block
	}
}

@media (max-width:560px) {
	.container {
		padding: 0 20px
	}

	.why-grid,
	.prod-grid,
	.team-grid,
	.pipeline {
		grid-template-columns: 1fr
	}

	.stats {
		grid-template-columns: 1fr
	}

	.stat {
		border-right: none;
		border-bottom: 1px solid var(--tint-2)
	}

	.stat:last-child {
		border-bottom: none
	}

	.hero-actions .btn {
		width: 100%
	}

	.cta-side {
		width: 100%
	}

	.cta-side .btn {
		width: 100%
	}
}