/* ============================================
   SASBUZZ — Deep Space Intelligence
   Aesthetic: Cinematic Futuristic Navy
   Accent: Electric Cyan #00D4FF
   Display: Chakra Petch | Body: Outfit
============================================ */

:root {
	--bg:     #020912;
	--navy-1: #040D1A;
	--navy-2: #071425;
	--navy-3: #0B1C35;
	--navy-4: #0F2444;

	--cyan:        #00D4FF;
	--cyan-bright: #60E8FF;
	--cyan-dim:    rgba(0, 212, 255, 0.08);
	--cyan-soft:   rgba(0, 212, 255, 0.15);
	--cyan-border: rgba(0, 212, 255, 0.25);
	--cyan-glow:   rgba(0, 212, 255, 0.35);
	--cyan-strong: rgba(0, 212, 255, 0.55);

	--blue:     #2F7FFF;
	--violet:   #7B4FFF;

	--border:     rgba(0, 180, 255, 0.10);
	--border-mid: rgba(0, 180, 255, 0.20);

	--text:        #FFFFFF;
	--text-muted:  rgba(255, 255, 255, 0.75);
	--text-subtle: rgba(255, 255, 255, 0.40);

	--font-h: 'Chakra Petch', sans-serif;
	--font-b: 'Outfit', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	font-family: var(--font-b);
	background: var(--bg);
	color: var(--text);
	overflow-x: hidden;
	line-height: 1.65;
}

/* ── Shared wrap ── */
.wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
	position: relative;
	z-index: 1;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(2, 9, 18, 0.85);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-bottom: 1px solid var(--border-mid);
	animation: slideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--cyan) 50%, transparent 100%);
	opacity: 0.7;
}

@keyframes slideDown {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

.nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 72px;
}

.logo img {
	height: 36px;
	filter: drop-shadow(0 0 10px var(--cyan-glow));
}

.nav-links {
	display: flex;
	list-style: none;
	gap: 40px;
}

.nav-links a {
	font-family: var(--font-h);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s;
	position: relative;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -6px; left: 0;
	width: 0; height: 1px;
	background: var(--cyan);
	box-shadow: 0 0 6px var(--cyan);
	transition: width 0.3s;
}

.nav-links a:hover,
.nav-links a.active { color: var(--cyan); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.btn-demo {
	font-family: var(--font-h);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cyan);
	text-decoration: none;
	padding: 9px 22px;
	border: 1px solid var(--cyan-border);
	border-radius: 2px;
	background: var(--cyan-dim);
	transition: all 0.25s;
	position: relative;
	overflow: hidden;
}

.btn-demo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--cyan-soft);
	transform: translateX(-100%);
	transition: transform 0.3s;
}

.btn-demo:hover::after { transform: translateX(0); }
.btn-demo:hover {
	color: var(--bg);
	background: var(--cyan);
	border-color: var(--cyan);
	box-shadow: 0 0 28px var(--cyan-glow);
}
.btn-demo span { position: relative; z-index: 1; }

.mobile-menu-btn {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none; border: none;
	cursor: pointer; padding: 6px;
}

.mobile-menu-btn span {
	width: 22px; height: 2px;
	background: var(--cyan);
	display: block;
	transition: all 0.3s;
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: 72px;
}

.hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero-grid-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		linear-gradient(rgba(0, 180, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 180, 255, 0.04) 1px, transparent 1px);
	background-size: 60px 60px;
	pointer-events: none;
}

/* Scanlines on hero */
.hero::before {
	content: '';
	position: absolute;
	inset: 0; z-index: 2;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 3px,
		rgba(0, 0, 20, 0.06) 3px,
		rgba(0, 0, 20, 0.06) 4px
	);
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 48px 60px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

/* ── Hero Left ── */
.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-h);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 28px;
	opacity: 0;
	animation: fadeUp 0.8s 0.2s forwards;
}

.eyebrow-dot {
	width: 6px; height: 6px;
	background: var(--cyan);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--cyan), 0 0 20px var(--cyan-glow);
	animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.3; }
}

/* ── Big Headline ── */
.hero-headline {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.hl {
	font-family: var(--font-h);
	font-size: clamp(40px, 5.5vw, 80px);
	font-weight: 700;
	line-height: 1.0;
	letter-spacing: -0.01em;
	display: block;
	opacity: 0;
}

.hl-outline {
	-webkit-text-stroke: 1.5px var(--text);
	color: transparent;
	animation: fadeUp 0.9s 0.35s forwards;
}

.hl-solid {
	color: var(--text);
	animation: fadeUp 0.9s 0.5s forwards;
}

.hl-glow {
	background: linear-gradient(90deg, var(--cyan-bright) 0%, var(--cyan) 40%, var(--blue) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 32px rgba(0, 212, 255, 0.55));
	animation: fadeUp 0.9s 0.65s forwards;
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero-sub {
	font-size: 16px;
	color: var(--text-muted);
	line-height: 1.65;
	max-width: 500px;
	margin-bottom: 28px;
	opacity: 0;
	animation: fadeUp 0.9s 0.80s forwards;
}

.hero-actions {
	display: flex;
	gap: 14px;
	margin-bottom: 48px;
	opacity: 0;
	animation: fadeUp 0.9s 0.95s forwards;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 30px;
	font-family: var(--font-h);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-decoration: none;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.25s;
	position: relative;
	overflow: hidden;
}

.btn svg { flex-shrink: 0; }

.btn-primary {
	background: linear-gradient(135deg, var(--cyan), #0099BB);
	color: var(--bg);
	box-shadow: 0 0 40px var(--cyan-glow), 0 4px 20px rgba(0,0,0,0.5);
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 64px var(--cyan-strong), 0 8px 32px rgba(0,0,0,0.5);
	background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
}

.btn-ghost {
	background: transparent;
	border: 1px solid var(--border-mid);
	color: var(--text-muted);
}

.btn-ghost:hover {
	border-color: var(--cyan-border);
	color: var(--cyan);
	background: var(--cyan-dim);
	box-shadow: 0 0 20px rgba(0,212,255,0.10);
}

/* ── Hero Metrics strip ── */
.hero-metrics {
	display: flex;
	align-items: center;
	gap: 24px;
	opacity: 0;
	animation: fadeUp 0.9s 1.1s forwards;
}

.hm-item { text-align: center; }

.hm-val {
	display: block;
	font-family: var(--font-h);
	font-size: 22px;
	font-weight: 700;
	color: var(--cyan);
	filter: drop-shadow(0 0 10px var(--cyan-glow));
	line-height: 1.1;
}

.hm-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-subtle);
	margin-top: 3px;
}

.hm-div {
	width: 1px;
	height: 32px;
	background: var(--border-mid);
}

/* ── Hero Right ── */
.hero-right {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: fadeUp 1s 0.6s forwards;
}

.hero-orb {
	position: absolute;
	width: 420px; height: 420px;
	background: radial-gradient(circle, rgba(0, 120, 255, 0.18) 0%, transparent 65%);
	border-radius: 50%;
	animation: orbPulse 5s ease-in-out infinite;
}

@keyframes orbPulse {
	0%, 100% { transform: scale(1);    opacity: 0.7; }
	50%       { transform: scale(1.12); opacity: 1;   }
}

.hero-img-wrap {
	position: relative;
}

.hero-img {
	width: 100%;
	max-width: 480px;
	filter: drop-shadow(0 0 60px rgba(0, 150, 255, 0.45)) brightness(1.1);
	animation: floatY 7s ease-in-out infinite;
}

@keyframes floatY {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%       { transform: translateY(-18px) rotate(1.5deg); }
}

/* Floating HUD badges */
.hero-badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(4, 13, 26, 0.88);
	border: 1px solid var(--cyan-border);
	border-radius: 3px;
	font-family: var(--font-h);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--text);
	backdrop-filter: blur(8px);
	box-shadow: 0 0 20px rgba(0,212,255,0.10);
	white-space: nowrap;
}

.badge-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 8px var(--cyan);
	animation: blink 1.5s ease-in-out infinite;
}

.badge-dot.orange {
	background: #FF6B35;
	box-shadow: 0 0 8px rgba(255,107,53,0.7);
}

.top-badge {
	top: 10%;
	right: -24px;
	animation: badgeFloat 4s ease-in-out infinite;
}

.bot-badge {
	bottom: 20%;
	left: -32px;
	animation: badgeFloat 4s ease-in-out 2s infinite;
}

@keyframes badgeFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-8px); }
}

/* ── Scroll hint ── */
.hero-scroll-hint {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--font-h);
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-subtle);
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, var(--cyan), transparent);
	animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
	0%, 100% { opacity: 0.4; transform: scaleY(1); }
	50%       { opacity: 1;   transform: scaleY(1.3); }
}

/* ══════════════════════════════════════════
   TICKER
══════════════════════════════════════════ */
.ticker-section {
	overflow: hidden;
	background: var(--navy-1);
	border-top: 1px solid var(--border-mid);
	border-bottom: 1px solid var(--border-mid);
	padding: 14px 0;
	position: relative;
}

.ticker-section::before,
.ticker-section::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.ticker-section::before {
	left: 0;
	background: linear-gradient(90deg, var(--navy-1), transparent);
}

.ticker-section::after {
	right: 0;
	background: linear-gradient(-90deg, var(--navy-1), transparent);
}

.ticker-track {
	display: flex;
	align-items: center;
	gap: 32px;
	width: max-content;
	animation: ticker 28s linear infinite;
	font-family: var(--font-h);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.ticker-track span { white-space: nowrap; }

.tick-dot {
	color: var(--cyan);
	opacity: 0.6;
	font-size: 8px;
	flex-shrink: 0;
}

@keyframes ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════
   STATS SECTION
══════════════════════════════════════════ */
.stats-section {
	position: relative;
	padding: 120px 0;
	background: var(--navy-2);
	text-align: center;
	overflow: hidden;
}

/* Giant decorative background number */
.stats-bg-number {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--font-h);
	font-size: clamp(200px, 35vw, 480px);
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px rgba(0, 212, 255, 0.06);
	line-height: 1;
	letter-spacing: -0.04em;
	user-select: none;
	pointer-events: none;
}

.stats-content {
	position: relative;
	z-index: 1;
}

.stat-display {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	line-height: 1;
}

.stat-count {
	font-family: var(--font-h);
	font-size: clamp(80px, 14vw, 180px);
	font-weight: 700;
	background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 40px rgba(0,212,255,0.5));
	letter-spacing: -0.03em;
}

.stat-plus {
	font-family: var(--font-h);
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 700;
	color: var(--cyan);
	filter: drop-shadow(0 0 20px var(--cyan-glow));
	margin-top: 16px;
}

.stat-label-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 20px 0 32px;
}

.stat-line {
	flex: 1;
	max-width: 80px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan-border));
}

.stat-line:last-child {
	background: linear-gradient(-90deg, transparent, var(--cyan-border));
}

.stat-label-text {
	font-family: var(--font-h);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cyan);
}

.stat-desc {
	font-size: 17px;
	color: var(--text-muted);
	line-height: 1.8;
	max-width: 700px;
	margin: 0 auto;
}

/* ══════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════ */
.section-head {
	text-align: center;
	margin-bottom: 80px;
}

.section-tag {
	display: inline-block;
	font-family: var(--font-h);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cyan);
	padding: 5px 16px;
	border: 1px solid var(--cyan-border);
	background: var(--cyan-dim);
	border-radius: 2px;
	margin-bottom: 24px;
}

.section-head h2 {
	font-family: var(--font-h);
	font-size: clamp(36px, 4.5vw, 60px);
	font-weight: 700;
	color: var(--text);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

.section-head h2 em {
	font-style: normal;
	background: linear-gradient(90deg, var(--cyan-bright), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.section-sub {
	font-size: 17px;
	color: var(--text-muted);
	max-width: 580px;
	margin: 0 auto;
	line-height: 1.75;
}

/* ══════════════════════════════════════════
   SOLUTIONS
══════════════════════════════════════════ */
.solutions-section {
	padding: 140px 0;
	background: var(--bg);
}

.sol-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.sol-card {
	position: relative;
	background: var(--navy-2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 56px 48px;
	overflow: hidden;
	cursor: default;
	transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s;
	transform-style: preserve-3d;
	perspective: 1000px;
}

/* Index number watermark */
.sol-card::before {
	content: attr(data-index);
	position: absolute;
	top: 20px; right: 28px;
	font-family: var(--font-h);
	font-size: 80px;
	font-weight: 700;
	color: rgba(0, 212, 255, 0.05);
	line-height: 1;
	letter-spacing: -0.04em;
	user-select: none;
}

/* Top glow line — slides in on hover */
.sol-card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	box-shadow: 0 0 16px var(--cyan);
	transform: scaleX(0);
	transition: transform 0.5s;
}

.sol-card:hover::after { transform: scaleX(1); }

.sol-card-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(0,120,255,0.07) 0%, transparent 60%);
	opacity: 0;
	transition: opacity 0.4s;
}

.sol-card:hover { transform: translateY(-10px) rotateX(1deg); }
.sol-card:hover .sol-card-bg { opacity: 1; }
.sol-card:hover {
	box-shadow:
		0 0 60px rgba(0,212,255,0.10),
		0 32px 64px rgba(0,0,0,0.5),
		inset 0 0 40px rgba(0,212,255,0.03);
	border-color: var(--cyan-border);
}

.sol-icon {
	width: 60px; height: 60px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
	transition: box-shadow 0.3s;
}

.sol-card:hover .sol-icon {
	box-shadow: 0 0 28px rgba(0,212,255,0.3);
}

.sol-icon svg {
	width: 30px; height: 30px;
	color: var(--cyan);
}

.sol-card h3 {
	font-family: var(--font-h);
	font-size: 26px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 16px;
	letter-spacing: 0.01em;
}

.sol-card p {
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.75;
	margin-bottom: 32px;
}

.sol-arrow {
	font-family: var(--font-h);
	font-size: 22px;
	color: var(--cyan);
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.3s, transform 0.3s;
}

.sol-card:hover .sol-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* ══════════════════════════════════════════
   FORMULA
══════════════════════════════════════════ */
.formula-section {
	padding: 140px 0;
	background: var(--navy-1);
	border-top: 1px solid var(--border-mid);
	border-bottom: 1px solid var(--border-mid);
	position: relative;
}

.formula-section::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	opacity: 0.5;
}

.formula-eq {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
	align-items: stretch;
	gap: 0;
	margin: 0 0 60px;
}

.feq-item {
	background: var(--navy-3);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 40px 28px;
	text-align: center;
	transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.feq-item::before {
	content: '';
	position: absolute;
	top: -1px; left: -1px;
	width: 0; height: 0;
	border-top: 2px solid var(--cyan);
	border-left: 2px solid var(--cyan);
	transition: width 0.3s, height 0.3s;
}

.feq-item::after {
	content: '';
	position: absolute;
	bottom: -1px; right: -1px;
	width: 0; height: 0;
	border-bottom: 2px solid var(--cyan);
	border-right: 2px solid var(--cyan);
	transition: width 0.3s, height 0.3s;
}

.feq-item:hover::before,
.feq-item:hover::after { width: 24px; height: 24px; }

.feq-item:hover {
	border-color: var(--cyan-border);
	box-shadow: 0 0 32px rgba(0,212,255,0.10), 0 24px 48px rgba(0,0,0,0.4);
	z-index: 1;
}

.feq-icon {
	width: 56px; height: 56px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 18px;
	flex-shrink: 0;
}

.feq-icon svg { width: 26px; height: 26px; color: var(--cyan); }

.feq-item h4 {
	font-family: var(--font-h);
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 8px;
	letter-spacing: 0.03em;
}

.feq-item p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.feq-op {
	font-family: var(--font-h);
	font-size: 32px;
	font-weight: 300;
	color: var(--cyan);
	opacity: 0.55;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	filter: drop-shadow(0 0 10px var(--cyan-glow));
	align-self: center;
}

.feq-equals {
	font-size: 40px;
	opacity: 0.8;
}

.feq-result {
	position: relative;
	background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(0,80,200,0.10));
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	padding: 40px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 60px rgba(0,212,255,0.10), inset 0 0 40px rgba(0,212,255,0.04);
	overflow: hidden;
}

.feq-result::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	box-shadow: 0 0 12px var(--cyan);
}

.feq-result::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	box-shadow: 0 0 12px var(--cyan);
}

.feq-result-glow {
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 60%);
	animation: spin 12s linear infinite;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.feq-result h3 {
	font-family: var(--font-h);
	font-size: 22px;
	font-weight: 700;
	background: linear-gradient(135deg, var(--cyan-bright), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 16px rgba(0,212,255,0.4));
	margin-bottom: 10px;
	position: relative; z-index: 1;
	letter-spacing: 0.02em;
}

.feq-result p {
	font-size: 13px;
	color: var(--text-muted);
	position: relative; z-index: 1;
	line-height: 1.6;
}

/* Formula left-to-right reveal */
.formula-eq > * {
	opacity: 0;
	transform: translateX(-28px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.formula-eq.animate > * { opacity: 1; transform: translateX(0); }
.formula-eq.animate > *:nth-child(1) { transition-delay: 0.00s; }
.formula-eq.animate > *:nth-child(2) { transition-delay: 0.12s; }
.formula-eq.animate > *:nth-child(3) { transition-delay: 0.24s; }
.formula-eq.animate > *:nth-child(4) { transition-delay: 0.36s; }
.formula-eq.animate > *:nth-child(5) { transition-delay: 0.48s; }
.formula-eq.animate > *:nth-child(6) { transition-delay: 0.60s; }
.formula-eq.animate > *:nth-child(7) { transition-delay: 0.72s; }

.formula-note {
	max-width: 860px;
	margin: 0 auto;
	padding: 32px 40px;
	background: var(--navy-3);
	border: 1px solid var(--border);
	border-left: 2px solid var(--cyan);
	border-radius: 2px;
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.8;
}

.formula-note strong {
	color: var(--cyan);
	font-weight: 700;
}

/* ══════════════════════════════════════════
   PHILOSOPHY
══════════════════════════════════════════ */
.philosophy-section {
	padding: 140px 0;
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

/* Big background cross-hair decoration */
.philosophy-section::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	height: 800px;
	border: 1px solid rgba(0,212,255,0.04);
	border-radius: 50%;
	pointer-events: none;
}

.phil-hero {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 80px;
}

.phil-headline {
	font-family: var(--font-h);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 700;
	color: var(--text);
	line-height: 1.15;
	margin-bottom: 24px;
	letter-spacing: -0.01em;
}

.glow-text {
	background: linear-gradient(90deg, var(--cyan-bright), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 24px rgba(0,212,255,0.4));
}

.phil-lead {
	font-size: 18px;
	color: var(--text-muted);
	line-height: 1.8;
	max-width: 720px;
	margin: 0 auto;
}

/* Theater block */
.theater-block {
	display: flex;
	align-items: center;
	gap: 36px;
	max-width: 860px;
	margin: 0 auto 80px;
	padding: 48px 52px;
	background: var(--navy-2);
	border: 1px solid var(--border-mid);
	border-radius: 4px;
	position: relative;
}

.theater-block::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
}

.theater-icon-wrap {
	flex-shrink: 0;
	width: 72px; height: 72px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--border-mid);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
}

.theater-icon-wrap svg {
	width: 32px; height: 32px;
	color: var(--text-subtle);
}

.theater-text h3 {
	font-family: var(--font-h);
	font-size: 26px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 12px;
	letter-spacing: 0.01em;
}

.theater-text p {
	font-size: 15.5px;
	color: var(--text-muted);
	line-height: 1.75;
}

.theater-kicker {
	font-family: var(--font-h);
	font-size: 15px;
	font-weight: 600;
	color: var(--cyan);
	margin-top: 14px !important;
	letter-spacing: 0.04em;
}

/* Phil grid */
.phil-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 80px;
}

.phil-item {
	background: var(--navy-2);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 40px 32px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s, transform 0.35s, box-shadow 0.35s;
}

.phil-item::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	transform: scaleX(0);
	transition: transform 0.5s;
}

.phil-item:hover::after { transform: scaleX(1); }

.phil-item:hover {
	transform: translateY(-8px);
	border-color: var(--cyan-border);
	box-shadow: 0 0 40px rgba(0,212,255,0.08), 0 24px 48px rgba(0,0,0,0.4);
}

.phil-num {
	position: absolute;
	top: 16px; right: 20px;
	font-family: var(--font-h);
	font-size: 56px;
	font-weight: 700;
	color: rgba(0,212,255,0.05);
	line-height: 1;
	letter-spacing: -0.03em;
	user-select: none;
}

.phil-icon {
	width: 52px; height: 52px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 22px;
	transition: box-shadow 0.3s;
}

.phil-item:hover .phil-icon {
	box-shadow: 0 0 24px rgba(0,212,255,0.25);
}

.phil-icon svg { width: 24px; height: 24px; color: var(--cyan); }

.phil-item h4 {
	font-family: var(--font-h);
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 10px;
	letter-spacing: 0.02em;
}

.phil-item p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.75;
}

/* ── Comparison ── */
.compare-wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 24px;
	align-items: center;
}

.compare-vs {
	font-family: var(--font-h);
	font-size: 20px;
	font-weight: 700;
	color: var(--text-subtle);
	letter-spacing: 0.12em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.compare-card {
	border-radius: 4px;
	padding: 40px 36px;
}

.compare-card.theater {
	background: var(--navy-2);
	border: 1px solid var(--border);
	opacity: 0.65;
}

.compare-card.intel {
	background: linear-gradient(135deg, rgba(0,212,255,0.07), rgba(0,80,200,0.05));
	border: 1px solid var(--cyan-border);
	box-shadow: 0 0 48px rgba(0,212,255,0.08);
	position: relative;
	overflow: hidden;
}

.compare-card.intel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	box-shadow: 0 0 12px var(--cyan);
}

.compare-label {
	font-family: var(--font-h);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-subtle);
	text-align: center;
	margin-bottom: 28px;
}

.compare-label.glow {
	color: var(--cyan);
	text-shadow: 0 0 12px var(--cyan-glow);
}

.compare-metrics {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}

.cm-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 2px;
}

.cm-val {
	font-family: var(--font-h);
	font-size: 20px;
	font-weight: 700;
	color: var(--text-subtle);
}

.cm-key {
	font-size: 12px;
	color: var(--text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.10em;
}

.compare-insights {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.ci-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.5;
}

.ci-tag {
	flex-shrink: 0;
	font-family: var(--font-h);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--cyan);
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 2px;
	padding: 3px 8px;
	white-space: nowrap;
	margin-top: 2px;
}

.compare-verdict {
	font-family: var(--font-h);
	font-size: 13px;
	font-style: italic;
	letter-spacing: 0.06em;
	color: var(--text-subtle);
	text-align: center;
	padding-top: 18px;
	border-top: 1px solid var(--border);
}

.compare-verdict.glow {
	color: var(--cyan);
	border-top-color: rgba(0,212,255,0.15);
}

/* ══════════════════════════════════════════
   DELIVER
══════════════════════════════════════════ */
.deliver-section {
	padding: 140px 0;
	background: var(--navy-1);
	border-top: 1px solid var(--border-mid);
	border-bottom: 1px solid var(--border-mid);
}

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

.deliver-card {
	position: relative;
	background: var(--navy-3);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 44px 36px;
	transition: border-color 0.3s, transform 0.35s, box-shadow 0.35s;
	overflow: hidden;
}

.deliver-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	transform: scaleX(0);
	box-shadow: 0 0 12px var(--cyan);
	transition: transform 0.5s;
}

.deliver-card:hover::before { transform: scaleX(1); }

.deliver-card:hover {
	transform: translateY(-8px);
	border-color: var(--cyan-border);
	box-shadow: 0 0 40px rgba(0,212,255,0.09), 0 28px 56px rgba(0,0,0,0.45);
}

.dc-num {
	font-family: var(--font-h);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--cyan);
	margin-bottom: 20px;
}

.dc-icon {
	width: 52px; height: 52px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 22px;
	transition: box-shadow 0.3s;
}

.deliver-card:hover .dc-icon { box-shadow: 0 0 24px rgba(0,212,255,0.25); }

.dc-icon svg { width: 24px; height: 24px; color: var(--cyan); }

.deliver-card h3 {
	font-family: var(--font-h);
	font-size: 19px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 12px;
	letter-spacing: 0.02em;
}

.deliver-card p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.75;
}

/* ══════════════════════════════════════════
   WHY SASBUZZ — horizontal numbered rows
══════════════════════════════════════════ */
.why-section {
	padding: 140px 0;
	background: var(--bg);
}

.why-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.why-item {
	display: grid;
	grid-template-columns: 60px 56px 1fr;
	gap: 28px;
	align-items: start;
	padding: 28px 32px;
	background: var(--navy-2);
	border: 1px solid var(--border);
	border-radius: 3px;
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.55s ease, transform 0.55s ease, border-color 0.25s, background 0.25s;
}
.why-list.animate .why-item {
	opacity: 1;
	transform: translateY(0);
}

.why-item::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--cyan);
	box-shadow: 0 0 12px var(--cyan-glow);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.35s;
}

.why-item:hover::before { transform: scaleY(1); }

.why-item:hover {
	border-color: var(--cyan-border);
	background: var(--navy-3);
	transform: translateX(6px);
}

.why-num {
	font-family: var(--font-h);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--cyan);
	padding-top: 16px;
}

.why-icon {
	width: 48px; height: 48px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: box-shadow 0.3s;
}

.why-item:hover .why-icon { box-shadow: 0 0 20px rgba(0,212,255,0.25); }

.why-icon svg { width: 22px; height: 22px; color: var(--cyan); }

.why-body h3 {
	font-family: var(--font-h);
	font-size: 17px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 8px;
	letter-spacing: 0.02em;
}

.why-body p {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.75;
}

/* ══════════════════════════════════════════
   CLIENTS — marquee
══════════════════════════════════════════ */
.clients-section {
	padding: 120px 0;
	background: var(--navy-1);
	border-top: 1px solid var(--border-mid);
	border-bottom: 1px solid var(--border-mid);
}

.marquee-wrap {
	overflow: hidden;
	position: relative;
	margin-top: 20px;
}

.marquee-wrap::before,
.marquee-wrap::after {
	content: '';
	position: absolute;
	top: 0; bottom: 0;
	width: 160px;
	z-index: 2;
	pointer-events: none;
}

.marquee-wrap::before {
	left: 0;
	background: linear-gradient(90deg, var(--navy-1), transparent);
}

.marquee-wrap::after {
	right: 0;
	background: linear-gradient(-90deg, var(--navy-1), transparent);
}

.marquee-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: marqueeScroll 24s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.mq-card {
	padding: 28px 36px;
	background: var(--navy-2);
	border: 1px solid var(--border);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	filter: grayscale(100%) brightness(0.45);
	flex-shrink: 0;
}

.mq-card:hover {
	filter: grayscale(0%) brightness(1);
	border-color: var(--cyan-border);
	box-shadow: 0 0 28px rgba(0,212,255,0.12), 0 8px 28px rgba(0,0,0,0.4);
	transform: translateY(-4px);
}

.mq-card img {
	height: 36px;
	width: auto;
	max-width: 100px;
}

/* ══════════════════════════════════════════
   EXPERIENCE
══════════════════════════════════════════ */
.exp-section {
	padding: 140px 0;
	background: var(--bg);
	position: relative;
}

.exp-head {
	max-width: 800px;
	margin-bottom: 72px;
}

.exp-head h2 {
	font-family: var(--font-h);
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	color: var(--text);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 20px 0 24px;
}

.exp-head h2 em {
	font-style: normal;
	background: linear-gradient(90deg, var(--cyan-bright), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.exp-lead {
	font-size: 17px;
	color: var(--text-muted);
	line-height: 1.8;
	max-width: 700px;
}

.exp-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.exp-item {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	padding: 32px 36px;
	background: var(--navy-2);
	border: 1px solid var(--border);
	border-left: 2px solid rgba(0,212,255,0.25);
	border-radius: 3px;
	transition: all 0.3s;
	opacity: 0;
	transform: translateX(-24px);
}

.exp-item.visible {
	opacity: 1;
	transform: translateX(0);
	transition: opacity 0.6s, transform 0.6s, border-color 0.25s, box-shadow 0.25s;
}

.exp-item:hover {
	border-left-color: var(--cyan);
	border-color: var(--cyan-border);
	box-shadow: -4px 0 24px rgba(0,212,255,0.10), 0 8px 32px rgba(0,0,0,0.3);
	transform: translateX(4px);
}

.exp-icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
}

.exp-icon svg { width: 22px; height: 22px; color: var(--cyan); }

.exp-body h3 {
	font-family: var(--font-h);
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 8px;
	letter-spacing: 0.02em;
}

.exp-body p {
	font-size: 14.5px;
	color: var(--text-muted);
	line-height: 1.75;
}

/* ══════════════════════════════════════════
   CTA
══════════════════════════════════════════ */
.cta-section {
	padding: 140px 0;
	background: var(--navy-2);
	border-top: 1px solid var(--border-mid);
	position: relative;
	overflow: hidden;
}

/* Animated scan beam */
.cta-scan {
	position: absolute;
	top: -30%;
	left: -10%;
	width: 120%;
	height: 40%;
	background: linear-gradient(180deg, transparent, rgba(0,212,255,0.025), transparent);
	animation: ctaScan 8s linear infinite;
	pointer-events: none;
}

@keyframes ctaScan {
	from { top: -40%; }
	to   { top: 130%; }
}

.cta-inner {
	position: relative;
	padding: 80px 64px;
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	background: rgba(0,212,255,0.03);
	box-shadow: 0 0 80px rgba(0,212,255,0.06), inset 0 0 80px rgba(0,212,255,0.02);
}

.cta-inner::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	box-shadow: 0 0 16px var(--cyan);
}

/* Corner decorations */
.cta-corner {
	position: absolute;
	width: 32px; height: 32px;
}

.cta-corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.cta-corner.tr { top: -1px; right: -1px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.cta-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.cta-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

.cta-headline {
	font-family: var(--font-h);
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 700;
	color: var(--text);
	text-align: center;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 16px 0 20px;
}

.cta-headline em {
	font-style: normal;
	background: linear-gradient(90deg, var(--cyan-bright), var(--cyan));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 24px rgba(0,212,255,0.4));
}

.cta-sub {
	font-size: 16.5px;
	color: var(--text-muted);
	text-align: center;
	max-width: 660px;
	margin: 0 auto 64px;
	line-height: 1.8;
}

.cta-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cta-card {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 28px;
	background: var(--navy-1);
	border: 1px solid var(--border-mid);
	border-radius: 4px;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.cta-card:hover {
	border-color: var(--cyan-border);
	box-shadow: 0 0 24px rgba(0,212,255,0.08);
}

.cta-card-icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	background: var(--cyan-dim);
	border: 1px solid var(--cyan-border);
	border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
}

.cta-card-icon svg { width: 20px; height: 20px; color: var(--cyan); }

.cta-card h4 {
	font-family: var(--font-h);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 8px;
}

.cta-card p, .cta-card a {
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.65;
	text-decoration: none;
}

.cta-card a:hover { color: var(--cyan); }

.cta-phone {
	font-size: 20px;
	font-weight: 600;
	color: var(--text);
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-h);
}

.btn-wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #25D366;
	color: #fff;
	border-radius: 2px;
	font-family: var(--font-h);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.25s;
}

.btn-wa:hover {
	background: #1DB954;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37,211,102,0.3);
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
	background: var(--navy-1);
	padding: 72px 0 32px;
	border-top: 1px solid var(--border-mid);
	position: relative;
}

.footer::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cyan), transparent);
	opacity: 0.4;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 2fr;
	gap: 72px;
	margin-bottom: 56px;
}

.footer-logo {
	width: 130px;
	margin-bottom: 14px;
	filter: drop-shadow(0 0 10px rgba(0,212,255,0.3));
}

.footer-tag-line {
	font-family: var(--font-h);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-subtle);
	margin-bottom: 24px;
}

.footer-social {
	display: flex;
	gap: 10px;
}

.footer-social a {
	width: 36px; height: 36px;
	background: var(--navy-3);
	border: 1px solid var(--border-mid);
	border-radius: 3px;
	display: flex; align-items: center; justify-content: center;
	color: var(--text-subtle);
	transition: all 0.25s;
}

.footer-social a:hover {
	border-color: var(--cyan-border);
	color: var(--cyan);
	background: var(--cyan-dim);
	box-shadow: 0 0 14px rgba(0,212,255,0.15);
}

.footer-social svg { width: 16px; height: 16px; }

.footer-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.footer-col h4 {
	font-family: var(--font-h);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 20px;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 12px; }

.footer-col a {
	font-size: 14px;
	color: var(--text-subtle);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-col a:hover { color: var(--text-muted); }

.footer-bottom {
	padding-top: 28px;
	border-top: 1px solid var(--border);
	text-align: center;
}

.footer-bottom p {
	font-family: var(--font-h);
	font-size: 11px;
	letter-spacing: 0.10em;
	color: var(--text-subtle);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
	.wrap { padding: 0 32px; }
	.nav-inner { padding: 0 32px; }
	.hero-inner { padding: 60px 32px 100px; gap: 40px; }
	.formula-eq { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; gap: 0; }
	.feq-item { min-width: 0; }
	.why-item { grid-template-columns: 48px 48px 1fr; }
	.cta-inner { padding: 60px 40px; }
	.cta-cards { grid-template-columns: 1fr; }
	.compare-wrap { grid-template-columns: 1fr; }
	.compare-vs { writing-mode: horizontal-tb; text-align: center; padding: 10px 0; }
}

@media (max-width: 768px) {
	.wrap { padding: 0 20px; }
	.nav-inner { padding: 0 20px; height: 60px; }
	.nav-links, .btn-demo { display: none; }
	.mobile-menu-btn { display: flex; }

	.hero-inner {
		grid-template-columns: 1fr;
		padding: 60px 20px 80px;
		text-align: center;
	}

	.hero-right { order: -1; }
	.hero-eyebrow { justify-content: center; }
	.hero-sub { margin-left: auto; margin-right: auto; }

	.hero-actions { justify-content: center; flex-wrap: wrap; }
	.hero-metrics { justify-content: center; }

	.top-badge, .bot-badge { display: none; }

	.hl { font-size: clamp(36px, 11vw, 72px); }

	.sol-grid,
	.phil-grid,
	.deliver-grid { grid-template-columns: 1fr; }

	.stats-section { padding: 80px 20px; }

	.formula-eq { grid-template-columns: 1fr; grid-template-rows: unset; }
	.feq-op, .feq-equals { padding: 8px 0; font-size: 28px; }
	.feq-item, .feq-result { width: 100%; }

	.theater-block { flex-direction: column; text-align: center; padding: 36px 28px; }

	.why-item { grid-template-columns: 1fr; padding: 24px 20px; }
	.why-num { display: none; }

	.exp-head { margin-bottom: 48px; }
	.exp-item { flex-direction: column; gap: 16px; padding: 24px 20px; }

	.cta-inner { padding: 40px 24px; }
	.cta-headline { font-size: 28px; }

	.footer-grid { grid-template-columns: 1fr; gap: 40px; }
	.footer-cols { grid-template-columns: 1fr; gap: 28px; }

	.section-head { margin-bottom: 52px; }
	.clients-section { padding: 80px 0; }
}

@media (max-width: 480px) {
	.hl { font-size: clamp(30px, 10vw, 56px); }
	.stat-count { font-size: clamp(64px, 18vw, 120px); }
	.btn { padding: 12px 22px; font-size: 11px; }
}