/* ovos console — landing page styles.
	Extracted from index.html; mirrors the tool's Rajdhani display face. */

/* Rajdhani (OFL) — the console's display/UI face, mirrored here so the
	landing page's chrome (logo, nav, buttons, headings, labels) reads as
	the same brand as the tool. Body prose stays in the system sans and
	code tokens in the mono stack. The four weights match the tool's set. */
@font-face
{
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/rajdhani/rajdhani-400.woff2') format('woff2');
}

@font-face
{
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/rajdhani/rajdhani-500.woff2') format('woff2');
}

@font-face
{
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/rajdhani/rajdhani-600.woff2') format('woff2');
}

@font-face
{
	font-family: 'Rajdhani';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/rajdhani/rajdhani-700.woff2') format('woff2');
}

:root
{
	--bg: #0a0a12;
	--panel: #0d0d17;
	--panel-2: #11111c;
	--border: #26263a;
	--cyan: #00f0ff;
	--yellow: #fcee0a;
	--red: #ff003c;
	--muted: #8b8ba7;
	--text: #e8e8f0;
	--mono: Consolas, "Courier New", monospace;
	--sans: "Segoe UI", Helvetica, Arial, sans-serif;
	/* the tool's display face — chrome and headings, matching the app */
	--display: 'Rajdhani', 'Segoe UI', sans-serif;
}

*
{
	box-sizing: border-box;
}

/* themed scrollbar — standard scrollbar-color (no vendor prefixes) */
html
{
	scroll-behavior: smooth;
	scrollbar-color: color-mix(in srgb, var(--cyan) 60%, var(--border)) var(--panel);
	scrollbar-width: thin;
}

body
{
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	/* faint scanline texture */
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px);
	overflow-x: hidden;
}

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

a:hover
{
	text-decoration: underline;
}

.wrap
{
	max-width: 1120px;
	margin: 0 auto;
	/* horizontal gutter ONLY — a `padding: 0 24px` shorthand also sets vertical
		padding to 0, and .wrap (a class) then outranks element rules like
		`section { padding: 70px 0 }`, collapsing their vertical padding and
		sticking section border-tops to the surrounding content. padding-inline
		leaves each component's own vertical padding intact. */
	padding-inline: 24px;
}

.mono
{
	font-family: var(--mono);
}

.eyebrow
{
	font-family: var(--display);
	font-size: 12px;
	letter-spacing: 5px;
	color: var(--muted);
	text-transform: uppercase;
	margin-top: 6px;
}

.eyebrow .on
{
	color: var(--cyan);
}

/* top bar */
header
{
	border-bottom: 1px solid var(--border);
	background: rgba(10, 10, 18, 0.85);
	position: sticky;
	top: 0;
	z-index: 10;
	backdrop-filter: blur(6px);
}

.bar
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
}

.logo
{
	font-family: var(--display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 4px;
	display: inline-block;
	text-decoration: none;
}

.logo:hover
{
	text-decoration: none;
}

.logo .con
{
	color: var(--yellow);
	text-shadow: 0 0 18px rgba(252, 238, 10, 0.35);
}

.logo .sole
{
	color: var(--cyan);
	text-shadow: 0 0 18px rgba(0, 240, 255, 0.35);
}

/* the brand mark ignites like a neon tube warming up — once per page load.
	Opacity-only, so the resting text-shadow glow is untouched (mirrors the
	app's .topbar-logo neon-ignite) */
@media (prefers-reduced-motion: no-preference)
{
	.logo
	{
		animation: neon-ignite 1.2s steps(1, jump-end);
	}
	
	@keyframes neon-ignite
	{
		0%
		{
			opacity: 0.35;
		}
		18%
		{
			opacity: 1;
		}
		26%
		{
			opacity: 0.5;
		}
		34%
		{
			opacity: 1;
		}
		41%
		{
			opacity: 0.75;
		}
		48%, 100%
		{
			opacity: 1;
		}
	}
}

.nav-links a
{
	color: var(--muted);
	font-size: 13px;
	letter-spacing: 2px;
	margin-left: 22px;
	text-transform: uppercase;
	font-family: var(--display);
}

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

@media (max-width: 720px)
{
	.nav-links
	{
		display: none;
	}
}

/* buttons */
.btn
{
	position: relative;
	isolation: isolate;
	display: inline-block;
	font-family: var(--display);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 12px 22px;
	color: var(--cyan);
	background: transparent;
	/* Notched frame drawn as the 1px gap between two clipped fills. A real
		border under clip-path loses its right/bottom edge at fractional
		widths (DPR=1 rounding); this renders reliably at any size. The inner
		fill must match the surface behind the button (see --btn-bg). */
	--btn-bg: var(--bg);
	--btn-line: var(--cyan);
	transition: color .15s;
}

.btn::before,
.btn::after
{
	content: '';
	position: absolute;
	z-index: -1;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.btn::before
{
	inset: 0;
	background: var(--btn-line);
}

.btn::after
{
	inset: 1px;
	background: var(--btn-bg);
	/* inherits ::before's 10px chamfer, inset 1px → a crisp 1px frame on retina. */
	transition: background .15s;
}

/* Non-retina (DPR 1) anti-aliases the 45° chamfer across pixels, so the diagonal
	frame reads far fainter than the crisp axis-aligned edges and the cut corners
	look broken. Widen the inner cut there (12px vs the outer 10px) so the diagonal
	band is ~2.8px and rasterises as solid as the 1px straight edges. Retina keeps
	the thin inherited chamfer (it renders the 1px frame sharply). */
@media (max-resolution: 1.5dppx)
{
	.btn::after
	{
		clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
	}
}

.btn:hover
{
	color: #04141a;
	text-decoration: none;
}

.btn:hover::after
{
	background: var(--btn-line);
}

.btn.yellow
{
	color: var(--yellow);
	--btn-line: var(--yellow);
}

.btn.yellow:hover
{
	color: #141200;
}

.dual .panel .btn
{
	--btn-bg: var(--panel-2);
}

/* hero */
.hero
{
	padding: 90px 0 70px;
	text-align: center;
	position: relative;
}

.hero h1
{
	font-family: var(--display);
	font-size: clamp(34px, 6vw, 62px);
	line-height: 1.05;
	margin: 22px 0 18px;
	font-weight: 700;
	letter-spacing: 0;
}

.hero h1 .g-cyan
{
	color: var(--cyan);
	text-shadow: 0 0 26px rgba(0, 240, 255, 0.4);
}

.hero h1 .g-yellow
{
	color: var(--yellow);
	text-shadow: 0 0 26px rgba(252, 238, 10, 0.4);
}

.hero p.lead
{
	font-size: clamp(16px, 2.4vw, 20px);
	color: var(--muted);
	max-width: 680px;
	margin: 0 auto 34px;
}

.hero-cta
{
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-shot
{
	margin: 60px auto 0;
	max-width: 100%;
	border: 1px solid var(--border);
	box-shadow: 0 0 60px rgba(0, 240, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
	display: block;
	cursor: zoom-in;
}

/* sections */
section
{
	padding: 48px 0;
	border-top: 1px solid var(--border);
}

h2
{
	font-family: var(--display);
	font-size: clamp(24px, 4vw, 34px);
	letter-spacing: 0;
	margin: 8px 0 12px;
}

.section-intro
{
	color: var(--muted);
	max-width: 640px;
	margin-bottom: 40px;
}

/* feature grid */
.features
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

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

.card
{
	position: relative;
	isolation: isolate;
	padding: 24px;
}

/* Notched frame drawn as the 1px gap between two clipped fills — a real border
	under clip-path loses its chamfered edges (same technique as .btn). ::before
	is the frame line, ::after the surface inset 1px with a 1px-smaller chamfer. */
.card::before,
.card::after
{
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--border);
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.card::after
{
	inset: 1px;
	background: var(--panel);
	clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}

/* same DPR-1 anti-aliasing fix as .btn — widen the inner cut on non-retina so the
	diagonal frame reads as solid as the straight edges (retina keeps the thin cut) */
@media (max-resolution: 1.5dppx)
{
	.card::after
	{
		clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
	}
}

.card .tag
{
	font-family: var(--display);
	font-size: 11px;
	letter-spacing: 3px;
	color: var(--yellow);
	text-transform: uppercase;
}

.card:nth-child(even) .tag
{
	color: var(--cyan);
}

.card h3
{
	font-family: var(--display);
	font-size: 18px;
	letter-spacing: 0.3px;
	margin: 10px 0 8px;
}

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

/* flow */
.flow
{
	display: flex;
	align-items: stretch;
	gap: 0;
	flex-wrap: wrap;
	font-family: var(--display);
}

.flow .step
{
	flex: 1 1 160px;
	background: var(--panel);
	border: 1px solid var(--border);
	padding: 20px 18px;
	position: relative;
}

.flow .step .n
{
	color: var(--yellow);
	font-size: 12px;
	letter-spacing: 2px;
}

.flow .step h4
{
	color: var(--cyan);
	margin: 8px 0 6px;
	font-size: 15px;
	letter-spacing: 1px;
}

.flow .step p
{
	color: var(--muted);
	font-size: 14px;
	margin: 0;
	font-family: var(--sans);
}

.flow .arrow
{
	display: flex;
	align-items: center;
	color: var(--border);
	font-size: 22px;
	padding: 0 6px;
}

@media (max-width: 860px)
{
	.flow .arrow
	{
		display: none;
	}
	
	.flow .step
	{
		flex-basis: 100%;
	}
}

/* gallery */
.gallery
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

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

.shot
{
	border: 1px solid var(--border);
	background: var(--panel);
}

.shot img
{
	width: 100%;
	display: block;
	border-bottom: 1px solid var(--border);
	cursor: zoom-in;
}

.shot .cap
{
	padding: 14px 18px;
}

.shot .cap b
{
	color: var(--text);
	font-family: var(--display);
	letter-spacing: 1px;
	font-size: 14px;
}

.shot .cap > span
{
	color: var(--muted);
	font-size: 14px;
	display: block;
}

/* click-to-zoom lightbox — the shots are captured at full desktop res, too
	detailed to read in the grid; click one to view it fit-to-screen */
.lightbox
{
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 5, 10, 0.92);
	cursor: zoom-out;
}

.lightbox.open
{
	display: flex;
}

.lightbox img
{
	max-width: 100%;
	max-height: 100%;
	width: auto;
	border: 1px solid var(--cyan);
	box-shadow: 0 0 44px rgba(0, 240, 255, 0.25);
}

.mobile-head
{
	margin: 48px 0 6px;
	font-family: var(--display);
	letter-spacing: 1px;
}

.mobile-gallery
{
	grid-template-columns: repeat(3, 1fr);
	max-width: 840px;
}

@media (max-width: 860px)
{
	.mobile-gallery
	{
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px)
{
	.mobile-gallery
	{
		grid-template-columns: 1fr;
		max-width: 340px;
		margin-inline: auto;
	}
}

/* use cases */
.uses
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

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

.use
{
	border-left: 2px solid var(--cyan);
	padding: 4px 0 4px 20px;
}

.use:nth-child(2)
{
	border-color: var(--yellow);
}

.use:nth-child(3)
{
	border-color: var(--red);
}

.use h3
{
	font-family: var(--display);
	letter-spacing: 0.3px;
	margin: 0 0 6px;
	font-size: 17px;
}

.use p
{
	color: var(--muted);
	margin: 0;
	font-size: 15px;
}

/* dual CTA */
.dual
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}

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

.dual .panel
{
	background: var(--panel-2);
	border: 1px solid var(--border);
	padding: 34px;
	text-align: center;
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}

.dual .panel h3
{
	font-family: var(--display);
	letter-spacing: 0.3px;
	font-size: 22px;
	margin: 0 0 10px;
}

.dual .panel p
{
	color: var(--muted);
	min-height: 66px;
	margin: 0 0 22px;
}

footer
{
	border-top: 1px solid var(--border);
	/* extra room below so the page doesn't end flush against the footer line;
		.wrap supplies the 24px side gutter via padding-inline */
	padding: 30px 0 64px;
	color: var(--muted);
	font-size: 13px;
	font-family: var(--display);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}