:root {
	--navy: #0d2137;
	--navy-2: #0a1a2b;
	--navy-3: #061320;
	--teal: #0e8fa0;
	--cyan: #22d3ee;
	--amber-bright: #f5a93c;
	--paper: #f2f0eb;
	--text: #1e1c18;
	--muted: #8fa3b8;
	--muted-light: #c8d4df;
	--red: #dc2626;
	--green: #10b981;
}

.eyebrow {
	font-size: clamp(10px, calc(9.712px + 0.09vw), 11px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--amber);
	font-weight: 700;
}

h1,
h2,
h3,
h4 {
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(38px, 5.5vw, 68px);
	line-height: 1.04;
}

h2 {
	font-size: clamp(26px, calc(20.811px + 1.622vw), 44px);
	line-height: 1.1;
	margin-bottom: 16px;
}

h3 {
	font-size: 22px;
	line-height: 1.25;
	margin-bottom: 10px;
	color: #fff;
}

p {
	color: #c8d4df;
}

.accent {
	color: var(--cyan);
}

.amber {
	color: var(--amber-bright);
}

/* NAV */
nav {
	background: rgba(6, 19, 32, 0.92);
	border-bottom: 1px solid rgba(34, 211, 238, 0.15);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-container svg {
	width: 28px;
	height: 28px;
}

.nav-logo {
  display: flex;
  flex-direction: column;
  font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
}

.nav-sublogo {
  font-size: 12px;
  color: var(--cyan);
}

.nav-cta {
	border-radius: 4px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nav-cta:hover {
	background: var(--amber-bright);
	color: #0a1a2b;
}

/* HERO */
.hero {
	padding: 100px 0;
	background: url('https://cleargazetest.com/img/counter-uas-program.png') center left no-repeat,
		radial-gradient(
			ellipse at 70% 30%,
			rgba(14, 143, 160, 0.18) 0%,
			transparent 60%
		),
		linear-gradient(180deg, #0a1a2b 0%, #061320 100%);
	background-size: cover;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0,0,0.35);
	pointer-events: none;
}

.hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 50px;
  min-height: calc(100vh - 200px);
}

.hero-eyebrow {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--amber);
	color: var(--amber-bright);
	font-size: clamp(10px, calc(9.712px + 0.09vw), 11px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 24px;
}

.hero h1 {
	margin-bottom: 20px;
}

.hero h1 .ln {
	color: var(--cyan);
}

.hero-sub {
	font-size: clamp(16px, calc(15.423px + 0.18vw), 18px);
	color: var(--muted-light);
	margin-bottom: 32px;
	line-height: 1.55;
}

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

.btn {
	display: inline-block;
	padding: clamp(9px, calc(8.423px + 0.18vw), 11px) clamp(11px, calc(9.847px + 0.36vw), 15px);
	border-radius: 4px;
	font-weight: 800;
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: 0.2s ease;
}

.btn-primary {
	background: var(--amber);
	color: #fff;
}

.btn-primary:hover {
	background: var(--amber-bright);
}

.btn-secondary {
	border: 1px solid var(--cyan);
	color: var(--cyan);
}

.btn-secondary:hover {
	background: var(--cyan);
	color: #0a1a2b;
}

.hero-description {
  margin-top:28px;
  margin-bottom: 0;
  font-size:14px;
  color:var(--muted);
  letter-spacing:.06em;
	max-width: 510px;
}

.hero-art {
	position: relative;
	margin-top: auto;
}

.hero-art-wrapper {
  display: flex;
	justify-content: space-between;
	gap: 15px;
	min-height: 310px;
}

.hero-art-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hero-art-item-title {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	margin-bottom: 5px;
	color: #22D3EE;
}

.hero-art-item-subtitle {
	color: #F5A93C;
	font-size: 14px;
}

.hero-art-icon-wrapper {
  min-width: 245px;
}

.hero-art-icon-wrapper svg {
	width: 100%;
	height: 100%;
}

.stat {
	opacity: 0;
}

.stat.fade-in-delay {
	opacity: 1;
	transition: 0.6s ease;
}

.problem-card,
.scenario,
.gt-grid-quote-wrapper {
	opacity: 0;
	transform: translateX(100%);
}

.problem-card.fade-in-slide-left,
.scenario.fade-in-slide-left,
.gt-grid-quote-wrapper.fade-in-slide-left {
	opacity: 1;
	transform: translateX(0);
	transition: 0.6s ease;
}

.pillar,
.biomarker,
.lit-block,
.cta-block-inner {
	opacity: 0;
	transform: translateY(20px);
}

.pillar.fade-in-up,
.biomarker.fade-in-up,
.lit-block.fade-in-up,
.cta-block-inner.fade-in-up {
	opacity: 1;
	transform: translateY(0);
	transition: 0.6s ease;
}

/* STAT STRIP */
.stat-strip {
	background: linear-gradient(90deg, #0e8fa0 0%, #0a1a2b 100%);
	padding: 50px 0;
	border-bottom: 1px solid rgba(34, 211, 238, 0.2);
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, calc(18.559px + 0.45vw), 25px);
}

.stat {
	text-align: center;
}

.stat-num {
	font-size: clamp(24px, calc(18.811px + 1.622vw), 42px);
	color: var(--amber-bright);
	font-weight: 700;
	line-height: 1;
}

.stat-label {
	font-size: clamp(10px, calc(9.712px + 0.09vw), 11px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fff;
	margin-top: 8px;
	font-weight: 600;
}

/* SECTION */
section {
	position: relative;
}

.section-head {
	max-width: 830px;
	margin-bottom: clamp(30px, calc(24.234px + 1.802vw), 50px);
}

.section-head .eyebrow {
	display: inline-block;
}

.section-head p {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	max-width:720px;
}

.section-divider {
	height: 2px;
	width: 64px;
	background: var(--amber);
	margin-top: clamp(2px, calc(1.135px + 0.27vw), 5px);
	margin-bottom: clamp(15px, calc(12.405px + 0.811vw), 24px);
}

/* THE PROBLEM */
.problem {
	background: #0a1a2b;
	padding: var(--vertical-padding) 0;
}

.problem-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: flex-start;
	gap: 50px;
}

.problem-description {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	font-weight: 400;
	margin-bottom: 15px;
}
.problem-description:last-child {
	margin-bottom: 0;
}

.problem-info-card {
	overflow: hidden;
}

.problem-card {
	background: rgba(13, 33, 55, 0.6);
	border: 1px solid rgba(220, 38, 38, 0.25);
	border-left: 3px solid var(--red);
	padding: clamp(15px, calc(12.117px + 0.901vw), 25px);
	margin-bottom: 15px;
	border-radius: 0 6px 6px 0;
}

.problem-card:last-child {
	margin-bottom: 0;
}

.problem-card h4 {
	color: #fff;
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.problem-card p {
	font-size: 14px;
	color: var(--muted-light);
	margin: 0;
}

/* SOLUTION */
.solution {
	background:
		radial-gradient(
			ellipse at 30% 50%,
			rgba(14, 143, 160, 0.12) 0%,
			transparent 60%
		),
		#061320;
		padding: var(--vertical-padding) 0;
}

.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
}

.pillar {
	background: linear-gradient(
		180deg,
		rgba(13, 33, 55, 0.8) 0%,
		rgba(10, 26, 43, 0.95) 100%
	);
	border: 1px solid rgba(34, 211, 238, 0.18);
	border-radius: 8px;
	padding: clamp(15px, calc(12.117px + 0.901vw), 25px);
	position: relative;
	overflow: hidden;
}

.pillar::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cyan), var(--amber));
}

.pillar-num {
	font-size: clamp(24px, calc(22.27px + 0.541vw), 30px);
	color: rgba(34, 211, 238, 0.25);
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
}

.pillar h3 {
	margin-bottom: 12px;
	color: #fff;
	font-size: clamp(24px, calc(22.27px + 0.541vw), 30px);
}

.pillar p {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	color: var(--muted-light);
	margin-bottom: 12px;
}

.pillar ul {
	list-style: none;
	padding: 0;
	margin-top: 16px;
}

.pillar li {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	color: var(--muted-light);
	padding-left: 18px;
	position: relative;
	margin-bottom: 8px;
}

.pillar li::before {
	content: '▸';
	color: var(--amber-bright);
	position: absolute;
	left: 0;
	font-weight: 700;
}

/* BIOMARKERS */
.biomarkers {
	background: #0a1a2b;
	padding: var(--vertical-padding) 0;
	border-top: 1px solid rgba(34, 211, 238, 0.1);
	border-bottom: 1px solid rgba(34, 211, 238, 0.1);
}

.biomarker-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.biomarker {
	padding: clamp(15px, calc(12.117px + 0.901vw), 25px);
	border: 1px solid rgba(34, 211, 238, 0.15);
	border-radius: 6px;
	background: rgba(6, 19, 32, 0.55);
	transition: all 0.3s;
}

.biomarker:hover {
	border-color: var(--amber);
	transform: translateY(-2px);
}

.biomarker-icon {
	width: clamp(25px, calc(21.829px + 0.991vw), 36px);
	height: clamp(25px, calc(21.829px + 0.991vw), 36px);
	margin-bottom: clamp(7px, calc(4.982px + 0.631vw), 14px);
	color: var(--amber-bright);
}

.biomarker h4 {
	font-size: clamp(16px, calc(15.423px + 0.18vw), 18px);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 8px;
}

.biomarker p {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	color: var(--muted-light);
	margin: 0;
	line-height: 1.5;
}

.biomarker .units {
	font-size: clamp(11px, calc(10.712px + 0.09vw), 12px);
	color: var(--cyan);
	letter-spacing: 0.08em;
	margin-top: 8px;
	display: block;
}

/* SCENARIOS */
.scenarios {
	background: linear-gradient(180deg, #061320 0%, #0a1a2b 100%);
	padding: var(--vertical-padding) 0;
}

.scenario-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 32px;
	overflow: hidden;
}

.scenario {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: flex-start;
	gap: 15px;
	padding: clamp(15px, calc(13.559px + 0.45vw), 20px);
	background: rgba(13, 33, 55, 0.5);
	border-left: 3px solid var(--cyan);
	border-radius: 0 6px 6px 0;
}

.scenario-id {
	font-size: clamp(16px, calc(13.694px + 0.721vw), 24px);
	color: var(--amber-bright);
	font-weight: 700;
	min-width: 64px;
}

.scenario h4 {
	font-size: clamp(16px, calc(15.423px + 0.18vw), 18px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 6px;
}

.scenario p {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	color: var(--muted-light);
	margin: 0;
	line-height: 1.5;
}

/* GROUND-TRUTH */
.ground-truth {
	background: #061320;
	padding: var(--vertical-padding) 0;
	border-top: 1px solid rgba(212, 132, 26, 0.2);
	border-bottom: 1px solid rgba(212, 132, 26, 0.2);
}

.gt-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(30px, calc(24.234px + 1.802vw), 50px);
	align-items: center;
}

.ground-truth-description {
	margin-bottom: clamp(10px, calc(8.559px + 0.45vw), 15px);
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
}

.ground-truth-description:last-child {
	margin-bottom: 0;
}

.gt-grid-quote-container {
	overflow: hidden;
}

.quote {
	font-size: clamp(16px, calc(14.847px + 0.36vw), 20px);
	line-height: 1.4;
	color: #fff;
	font-style: italic;
	border-left: 3px solid var(--amber);
	padding: clamp(15px, calc(12.117px + 0.901vw), 25px);
	margin-bottom: clamp(10px, calc(8.559px + 0.45vw), 15px);
}

.gt-grid-quote {
	margin-top: clamp(25px, calc(23.559px + 0.45vw), 30px);
}

.source {
	font-size: clamp(11px, calc(10.712px + 0.09vw), 12px);
	color: var(--muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 8px;
}

/* SCIENCE */
.science {
	background: #0a1a2b;
	padding: var(--vertical-padding) 0;
}

.science-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(15px, calc(10.676px + 1.351vw), 30px);
	margin-top: clamp(30px, calc(27.117px + 0.901vw), 40px);
}

.lit-block {
	padding: clamp(15px, calc(12.117px + 0.901vw), 25px);
	background: rgba(6, 19, 32, 0.6);
	border: 1px solid rgba(34, 211, 238, 0.12);
	border-radius: 6px;
}

.lit-block h4 {
	font-size: clamp(16px, calc(15.423px + 0.18vw), 18px);
	color: var(--cyan);
	font-family: -apple-system, sans-serif;
	font-weight: 700;
	margin-bottom: 12px;
}

.lit-block p {
	font-size: clamp(14px, calc(13.423px + 0.18vw), 16px);
	line-height: 1.6;
	color: var(--muted-light);
	margin-bottom: 10px;
}

.lit-block p:last-child {
	margin-bottom: 0;
}

.lit-block .cite {
	font-size: 13px;
	color: var(--muted);
	font-style: italic;
}

/* CTA BLOCK */
.cta-block {
	background: linear-gradient(120deg, var(--navy) 0%, #1a3a52 100%);
	padding: var(--vertical-padding) 0;
	text-align: center;
	border-top: 1px solid var(--amber);
}

.cta-block h2 {
	color: #fff;
}

.cta-block p {
	font-size: clamp(16px, calc(15.423px + 0.18vw), 18px);
	color: var(--muted-light);
	max-width: 720px;
	margin: 0 auto 28px;
}

.pulse {
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

@media (max-width: 1010px) {
	.pillars {
    grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 980px) {
	.gt-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 880px) {
	.hero {
		padding: 100px 0 50px 0;
	}
	.hero-grid {
		grid-template-columns: 1fr;
	}
	.problem-grid {
		grid-template-columns: 1fr;
	}
	.biomarker-grid {
		grid-template-columns: 1fr 1fr;
	}
	.science-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 825px) {
	.scenario-list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 810px) {
	.nav-links {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    padding: 20px;
    background: rgba(24, 56, 94, 0.97);
    transform: translateX(100%);
    transition: 0.3s ease;
    z-index: 902;
  }
	.nav-burger {
    display: block;
    width: 25px;
    height: 25px;
  }
	.nav-container {
    justify-content: space-between;
  }
	.nav-links.active {
    transform: translateX(0);
  }
}

@media (max-width: 690px) {
	.pillars {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 560px) {
	.biomarker-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 540px) {
	.hero-art-icon-wrapper {
		min-width: 190px;
	}
}

@media (max-width: 515px) {
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.hero {
		background-position-x: 25%;
	}
	.hero-art-wrapper {
		flex-direction: column;
	}
	.hero-art-list {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.hero-art-icon-wrapper {
		min-width: 0;
    width: 190px;
		margin: 0 auto;
	}
}

@media (max-width: 370px) {
	.scenario {
    grid-template-columns: 1fr;
		gap: 10px;
	}
}