.od-home-page {
	--od-bg: #0a0f14;
	--od-panel: #0e161e;
	--od-panel-raised: #121d26;
	--od-line: #233340;
	--od-text: #e6edf3;
	--od-muted: #8b9aa8;
	--od-cyan: #67e8f9;
	--od-green: #86efac;
	--od-amber: #fbbf24;
	--od-pink: #f0abfc;
	--od-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--od-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	position: relative;
	min-height: calc(100vh - 68px);
	overflow: hidden;
	background: var(--od-bg);
	color: var(--od-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.od-home-page::before,
.od-home-page::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.od-home-page::before {
	inset: 0;
	border: 1px solid rgba(103, 232, 249, 0.08);
	box-shadow: inset 0 0 100px rgba(103, 232, 249, 0.035);
}

.od-home-page::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--od-cyan);
	opacity: 0.45;
	animation: od-scanline 7s linear infinite;
}

.od-home-backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.od-backdrop-grid {
	position: absolute;
	inset: -10%;
	opacity: 0.36;
	background-image: linear-gradient(rgba(103, 232, 249, 0.065) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, 0.065) 1px, transparent 1px);
	background-size: 52px 52px;
	transform: perspective(700px) rotateX(62deg) translateY(28%);
	transform-origin: center bottom;
	mask-image: linear-gradient(to bottom, transparent 0%, black 34%, black 82%, transparent 100%);
	animation: od-grid-drift 22s linear infinite;
}

.od-backdrop-ring {
	position: absolute;
	border: 1px solid rgba(103, 232, 249, 0.18);
	border-radius: 50%;
	box-shadow: 0 0 38px rgba(103, 232, 249, 0.06), inset 0 0 38px rgba(103, 232, 249, 0.04);
	transform: rotate(-18deg);
	animation: od-orbit 28s linear infinite;
}

.od-backdrop-ring::before,
.od-backdrop-ring::after {
	position: absolute;
	content: "";
	border-radius: 50%;
}

.od-backdrop-ring::before {
	inset: 9%;
	border: 1px dashed rgba(240, 171, 252, 0.19);
}

.od-backdrop-ring::after {
	top: 14%;
	left: 16%;
	width: 8px;
	height: 8px;
	background: var(--od-pink);
	box-shadow: 0 0 0 5px rgba(240, 171, 252, 0.08), 0 0 24px rgba(240, 171, 252, 0.72);
}

.od-ring-a {
	top: -220px;
	right: -170px;
	width: 720px;
	height: 720px;
}

.od-ring-b {
	bottom: -430px;
	left: -300px;
	width: 860px;
	height: 860px;
	border-color: rgba(134, 239, 172, 0.15);
	animation-duration: 36s;
	animation-direction: reverse;
}

.od-ring-b::before { border-color: rgba(251, 191, 36, 0.14); }
.od-ring-b::after {
	top: auto;
	right: 13%;
	bottom: 20%;
	left: auto;
	background: var(--od-amber);
	box-shadow: 0 0 0 5px rgba(251, 191, 36, 0.08), 0 0 24px rgba(251, 191, 36, 0.58);
}

.od-backdrop-node {
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--od-cyan);
	box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.08), 0 0 22px rgba(103, 232, 249, 0.75);
	animation: od-node-pulse 2.8s ease-in-out infinite;
}

.od-node-a { top: 22%; left: 12%; }
.od-node-b { top: 29%; right: 16%; animation-delay: 800ms; background: var(--od-green); box-shadow: 0 0 0 5px rgba(134, 239, 172, 0.08), 0 0 22px rgba(134, 239, 172, 0.7); }
.od-node-c { right: 35%; bottom: 16%; animation-delay: 1400ms; background: var(--od-pink); box-shadow: 0 0 0 5px rgba(240, 171, 252, 0.08), 0 0 22px rgba(240, 171, 252, 0.62); }

.od-backdrop-line {
	position: absolute;
	display: block;
	height: 1px;
	background: rgba(103, 232, 249, 0.22);
	transform-origin: left center;
	--od-line-angle: 14deg;
	animation: od-connect 5.5s var(--od-ease-in-out) infinite alternate;
}

.od-line-a { top: 22.3%; left: 12.5%; width: 31%; }
.od-line-b { top: 29.3%; right: 16.3%; width: 28%; --od-line-angle: 154deg; transform-origin: right center; animation-delay: 900ms; background: rgba(240, 171, 252, 0.2); }

.od-home-shell {
	position: relative;
	z-index: 1;
	max-width: 1340px;
	margin: 0 auto;
	padding: 56px 42px 72px;
}

.od-home-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
	align-items: center;
	gap: 94px;
	min-height: calc(100vh - 196px);
	padding: 66px 0 82px;
}

.od-home-intro {
	position: relative;
	max-width: 600px;
	padding-left: 26px;
	animation: od-reveal 560ms var(--od-ease-out) 80ms both;
}

.od-home-intro::before {
	position: absolute;
	top: 5px;
	bottom: 4px;
	left: 0;
	width: 2px;
	content: "";
	background: var(--od-cyan);
	box-shadow: 0 0 22px rgba(103, 232, 249, 0.48);
	transform-origin: top;
	animation: od-reveal-line 700ms var(--od-ease-out) 180ms both;
}

.od-home-eyebrow {
	margin: 0 0 22px;
	color: var(--od-cyan);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.od-home-eyebrow::before {
	margin-right: 10px;
	color: var(--od-pink);
	content: "///";
	letter-spacing: 0;
}

.od-home-intro h1 {
	margin: 0;
	color: var(--od-text);
	font-size: 5rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.08;
}

.od-home-intro h1 span {
	color: var(--od-green);
	text-shadow: 0 0 24px rgba(134, 239, 172, 0.2), 10px 0 38px rgba(240, 171, 252, 0.07);
}

.od-home-lede {
	max-width: 510px;
	margin: 30px 0 0;
	color: var(--od-muted);
	font-family: ui-sans-serif, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.75;
}

.od-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

.od-home-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border: 1px solid #355061;
	border-radius: 4px;
	background: transparent;
	color: var(--od-text);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
	transition: border-color 160ms ease-out, background-color 160ms ease-out, transform 160ms ease-out;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.od-home-button-primary {
	border-color: var(--od-cyan);
	background: var(--od-cyan);
	color: #071116;
	box-shadow: 0 10px 26px rgba(103, 232, 249, 0.16), 0 0 0 1px rgba(103, 232, 249, 0.22);
}

@media (hover: hover) and (pointer: fine) {
	.od-home-button:hover {
		border-color: var(--od-cyan);
		background: rgba(103, 232, 249, 0.1);
		transform: translateY(-2px);
	}

	.od-home-button-primary:hover {
		background: #a5f3fc;
		color: #071116;
	}
}

.od-home-button:active {
	transform: scale(0.97);
}

.od-terminal {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(103, 232, 249, 0.28);
	border-radius: 8px;
	background: rgba(14, 22, 30, 0.88);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.44), 0 0 0 8px rgba(103, 232, 249, 0.025), 0 0 70px rgba(103, 232, 249, 0.07);
	backdrop-filter: blur(12px);
	animation: od-reveal 620ms var(--od-ease-out) 160ms both;
}

.od-terminal::before {
	position: absolute;
	inset: 10px;
	content: "";
	border: 1px solid rgba(240, 171, 252, 0.08);
	border-radius: 4px;
	pointer-events: none;
}

.od-terminal::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	content: "";
	background: var(--od-cyan);
	opacity: 0.65;
	transform: translateX(-100%);
	animation: od-terminal-line 1.2s var(--od-ease-out) 600ms forwards;
}

.od-terminal-chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 19px;
	border-bottom: 1px solid var(--od-line);
	background: var(--od-panel-raised);
	color: #b8c5cf;
	font-size: 11px;
}

.od-terminal-chrome svg {
	margin-right: 5px;
	vertical-align: -2px;
	color: var(--od-cyan);
}

.od-terminal-dots {
	display: flex;
	gap: 5px;
	margin-right: 4px;
}

.od-terminal-dots i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #52616d;
}

.od-terminal-dots i:first-child { background: #fb7185; }
.od-terminal-dots i:nth-child(2) { background: var(--od-amber); }
.od-terminal-dots i:last-child { background: var(--od-green); }

.od-terminal-lock {
	margin-left: auto;
	color: var(--od-green);
}

.od-terminal-body {
	position: relative;
	min-height: 390px;
	padding: 36px 34px 38px;
	font-size: 14px;
	line-height: 1.85;
	counter-reset: od-terminal-line;
}

.od-terminal-line {
	display: flex;
	align-items: baseline;
	margin: 0;
	opacity: 0;
	transform: translateY(7px);
	animation: od-line-in 300ms var(--od-ease-out) forwards;
}

.od-terminal-line::before {
	flex: 0 0 24px;
	margin-right: 10px;
	color: #465b69;
	content: counter(od-terminal-line, decimal-leading-zero);
	counter-increment: od-terminal-line;
	font-size: 10px;
	line-height: 1;
	text-align: right;
}

.od-terminal-line:nth-child(1) { animation-delay: 520ms; }
.od-terminal-line:nth-child(2) { animation-delay: 590ms; }
.od-terminal-line:nth-child(3) { animation-delay: 660ms; }
.od-terminal-line:nth-child(4) { animation-delay: 730ms; }
.od-terminal-line:nth-child(5) { animation-delay: 800ms; }
.od-terminal-line:nth-child(6) { animation-delay: 870ms; }
.od-terminal-line:nth-child(7) { animation-delay: 940ms; }

.od-terminal-prompt { color: var(--od-cyan); }
.od-terminal-value { padding-left: 18px; color: #c7d2dc; }
.od-terminal-muted { color: #637584; }
.od-terminal-ok { color: var(--od-green); }

.od-terminal-caret span {
	display: inline-block;
	width: 8px;
	height: 15px;
	margin-left: 4px;
	vertical-align: -2px;
	background: var(--od-green);
	animation: od-caret 1.1s steps(1, end) infinite;
}

@keyframes od-reveal {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes od-line-in {
	to { opacity: 1; transform: translateY(0); }
}

@keyframes od-caret {
	0%, 45% { opacity: 1; }
	46%, 100% { opacity: 0; }
}

@keyframes od-grid-drift {
	from { transform: perspective(700px) rotateX(62deg) translateY(28%); }
	to { transform: perspective(700px) rotateX(62deg) translateY(31%); }
}

@keyframes od-orbit {
	from { transform: rotate(-18deg); }
	to { transform: rotate(342deg); }
}

@keyframes od-node-pulse {
	0%, 100% { opacity: 0.62; transform: scale(0.82); }
	50% { opacity: 1; transform: scale(1.18); }
}

@keyframes od-connect {
	from { opacity: 0.22; transform: scaleX(0.84) rotate(var(--od-line-angle)); }
	to { opacity: 0.66; transform: scaleX(1) rotate(var(--od-line-angle)); }
}

@keyframes od-reveal-line {
	from { opacity: 0; transform: scaleY(0.15); }
	to { opacity: 1; transform: scaleY(1); }
}

@keyframes od-terminal-line {
	to { transform: translateX(100%); }
}

@keyframes od-scanline {
	0% { transform: translateY(0); opacity: 0; }
	8% { opacity: 0.45; }
	92% { opacity: 0.45; }
	100% { transform: translateY(100vh); opacity: 0; }
}

@media (max-width: 1100px) {
	.od-home-layout { gap: 52px; }
	.od-home-intro h1 { font-size: 4rem; }
}

@media (max-width: 800px) {
	.od-home-shell { padding: 38px 24px 54px; }
	.od-home-layout { grid-template-columns: 1fr; gap: 58px; min-height: 0; padding: 54px 0 58px; }
	.od-home-intro { max-width: none; }
	.od-home-intro h1 { font-size: 3.45rem; }
	.od-terminal-body { min-height: 0; }
	.od-ring-a { top: -180px; right: -360px; }
	.od-ring-b { bottom: -420px; left: -470px; }
}

@media (max-width: 540px) {
	.od-home-shell { padding: 26px 18px 40px; }
	.od-home-layout { gap: 40px; padding: 40px 0 42px; }
	.od-home-intro { padding-left: 18px; }
	.od-home-intro h1 { font-size: 2.7rem; }
	.od-home-lede { font-size: 14px; }
	.od-home-actions { margin-top: 30px; }
	.od-home-button { width: 100%; }
	.od-terminal-body { padding: 28px 20px 30px; font-size: 11px; }
	.od-terminal-chrome { padding: 0 13px; font-size: 10px; }
	.od-terminal-lock { display: none; }
	.od-backdrop-grid { background-size: 38px 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.od-home-page::after,
	.od-terminal-caret span,
	.od-backdrop-grid,
	.od-backdrop-ring,
	.od-backdrop-node,
	.od-backdrop-line,
	.od-home-intro::before { animation: none; }
	.od-home-page::after { opacity: 0.2; }
	.od-home-intro,
	.od-terminal,
	.od-terminal-line { animation: none; opacity: 1; transform: none; }
	.od-terminal-line { opacity: 1; }
	.od-home-button { transition: border-color 160ms ease-out, background-color 160ms ease-out; }
}