/* Logo Loader Styles */
.logo-loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(1200px 800px at 50% -10%, #0b1521 0%, var(--bg) 60%) fixed, var(--bg);
	z-index: 10;
}

.logo-text {
	display: flex;
	align-items: center;
	font-family: 'Space Grotesk', ui-sans-serif;
	font-weight: 700;
	font-size: 48px;
	letter-spacing: 0.2px;
	line-height: 1;
}

.logo-letter {
	opacity: 0;
	transform: translateY(20px) scale(0.8);
	animation-fill-mode: forwards;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.logo-letter.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Add staggered animation delays */
.logo-letter:nth-child(1) { animation-delay: 0.1s; }
.logo-letter:nth-child(2) { animation-delay: 0.2s; }
.logo-letter:nth-child(3) { animation-delay: 0.3s; }
.logo-letter:nth-child(4) { animation-delay: 0.4s; }
.logo-letter:nth-child(5) { animation-delay: 0.5s; }
.logo-letter:nth-child(6) { animation-delay: 0.6s; }
.logo-letter:nth-child(7) { animation-delay: 0.7s; }
.logo-letter:nth-child(8) { animation-delay: 0.8s; }
.logo-letter:nth-child(9) { animation-delay: 0.9s; }

/* Fade out loader */
.logo-loader.fade-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease-out;
}

* { box-sizing: border-box; }
:root {
	--bg: #05070a;
	--bg-2: #0a0f14;
	--fg: #eaf7ff;
	--muted: #a6b3be;
	--accent: #00ffd1;
	--accent-2: #5a8cff;
	--ring: rgba(0,255,209,0.55);
	--glass: rgba(255,255,255,0.06);
	--glass-2: rgba(255,255,255,0.12);
	--shadow: 0 10px 40px rgba(0,0,0,0.5);
}

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
	color: var(--fg);
	background: radial-gradient(1200px 800px at 50% -10%, #0b1521 0%, var(--bg) 60%) fixed, var(--bg);
	accent-color: var(--accent);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
    overflow: hidden; /* keep everything in one screen without scroll */
}

.site-header, .site-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	background: rgba(0,0,0,0) !important; /* transparent header/footer */
	backdrop-filter: none !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 0;
	transition: opacity 0.8s ease-out;
}

.site-header.visible, .site-footer.visible {
	opacity: 1;
}
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 3; }
.site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 3; }

.brand {
	font-family: 'Space Grotesk', ui-sans-serif;
	font-weight: 700;
	letter-spacing: 0.2px;
	font-size: 18px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.lang-switch { display: flex; gap: 8px; }
.lang-switch button {
	appearance: none;
	border: 1px solid transparent;
	padding: 8px 12px;
	border-radius: 999px;
	background: var(--glass);
	color: var(--fg);
	cursor: pointer;
	transition: border-color .2s, background .2s, transform .2s;
}
.lang-switch button:hover { transform: translateY(-1px); background: var(--glass-2);} 
.lang-switch button.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring) inset; }

.hero {
    min-height: calc(var(--vh, 1vh) * 100);
	display: grid;
	place-items: center;
	padding: 24px;
	opacity: 0;
	transition: opacity 0.8s ease-out;
}

.hero.visible {
	opacity: 1;
}

.blob {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	filter: drop-shadow(0 50px 120px rgba(0,0,0,0.55));
	z-index: 1;
}

.blob canvas {
	width: 100%;
	height: 100%;
	max-width: 1400px;
    max-height: 58vh; /* reduce to keep prompt + footer within one screen */
	image-rendering: auto;
	background: transparent;
	border: none;
}

.prompt {
	position: absolute;
    top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: grid;
	gap: 12px;
	place-items: center;
}

/* hide prompt until hero animation is ready */
.boot-hidden { opacity: 0; pointer-events: none; }
.boot-visible { opacity: 1; transition: opacity .28s ease; }


.nano-input {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 12px;
	border-radius: 12px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: var(--shadow);
	transition: transform .2s ease, box-shadow .2s ease;
	margin: 0 auto;
	/* Ensure no initial collapse before JS recalibration */
	width: min(380px, 86vw);
}

#ask {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	width: 100%;
	cursor: pointer;
}

#ask:focus {
	outline: none;
}

#ask option {
	background: #0a0a0a;
	color: #fff;
	padding: 8px;
}

/* enhance focus state for glass input */
.nano-input:focus-within { box-shadow: var(--shadow), 0 0 0 2px var(--accent) inset, 0 0 0 6px rgba(0,255,209,0.12); transform: translateY(-1px); }

.hidden {
	display: none;
}

.multi-step-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	max-width: 90vw;
	transition: width 0.3s ease;
}

.nano-input:focus-within {
	box-shadow: 0 10px 24px rgba(0, 255, 209, 0.25), 0 0 0 2px rgba(0, 255, 209, 0.4) inset;
	transform: translateY(-2px);
	transition: transform .12s ease, filter .2s ease;
}


.nano-input input,
.nano-input [contenteditable="true"] {
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	width: 100%;
	cursor: pointer;
	padding: 8px 6px 8px 8px;
	transition: color .2s ease;
}

.nano-input input:focus,
.nano-input [contenteditable="true"]:focus {
	color: #ffffff;
}

.nano-input input::placeholder {
	color: rgba(255,255,255,0.6);
	transition: color 0.2s ease;
}

.nano-input input:focus::placeholder {
	color: rgba(255,255,255,0.4);
}

/* Placeholder imitation for contenteditable */
.nano-input [contenteditable="true"][data-placeholder]:empty:before {
	content: attr(data-placeholder);
	color: rgba(255,255,255,0.6);
}

/* Nuclear override of ALL browser user agent autofill styles */
.nano-input input:-webkit-autofill,
.nano-input input:-webkit-autofill:hover,
.nano-input input:-webkit-autofill:focus,
.nano-input input:-webkit-autofill:active,
.nano-input input:-webkit-autofill-selected,
.nano-input input:-internal-autofill-selected {
	appearance: none !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	width: 100% !important;
	cursor: pointer !important;
	padding: 8px 6px 8px 8px !important;
	transition: color .2s ease !important;
	-webkit-text-fill-color: #fff !important;
	-webkit-text-stroke: 0px !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 0 !important;
	outline-color: transparent !important;
	outline-style: none !important;
	outline-width: 0 !important;
}

.nano-input input:-webkit-autofill:focus,
.nano-input input:-webkit-autofill-selected:focus,
.nano-input input:-internal-autofill-selected:focus {
	color: #ffffff !important;
}

/* Override all possible user agent autofill pseudo-classes */
.nano-input input:-webkit-autofill::first-line,
.nano-input input:-webkit-autofill::before,
.nano-input input:-webkit-autofill::after,
.nano-input input:-webkit-autofill-selected::first-line,
.nano-input input:-webkit-autofill-selected::before,
.nano-input input:-webkit-autofill-selected::after {
	color: #fff !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Force styling for inputs that were autofilled but user is editing */
.nano-input input[data-autofilled="true"] {
	appearance: none !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	width: 100% !important;
	cursor: pointer !important;
	padding: 8px 6px 8px 8px !important;
	transition: color .2s ease !important;
	-webkit-text-fill-color: #fff !important;
	-webkit-text-stroke: 0px !important;
	-webkit-appearance: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 0 !important;
	outline-color: transparent !important;
	outline-style: none !important;
	outline-width: 0 !important;
}

/* Fallback for Firefox - override ALL autofill states */
.nano-input input:-moz-autofill,
.nano-input input:-moz-autofill:hover,
.nano-input input:-moz-autofill:focus,
.nano-input input:-moz-autofill-selected {
	appearance: none !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	width: 100% !important;
	cursor: pointer !important;
	padding: 8px 6px 8px 8px !important;
	transition: color .2s ease !important;
	box-shadow: none !important;
	text-shadow: none !important;
	border-radius: 0 !important;
	outline-color: transparent !important;
	outline-style: none !important;
	outline-width: 0 !important;
}

/* Kill ALL possible browser default autofill styling */
input:-internal-autofill-selected,
input:-internal-autofill-previewed,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill-selected {
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* Override specific browser autofill colors */
input:-internal-autofill-selected {
	background-color: transparent !important;
	background: transparent !important;
}

input:-internal-autofill-previewed {
	background-color: transparent !important;
	background: transparent !important;
}

input:-webkit-autofill {
	background-color: transparent !important;
	background: transparent !important;
}

/* Nuclear override for ALL input autofill states */
* input:-webkit-autofill,
* input:-webkit-autofill:hover,
* input:-webkit-autofill:focus,
* input:-webkit-autofill:active,
* input:-webkit-autofill-selected,
* input:-internal-autofill-selected {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
}

/* Override specific browser default autofill background colors */
input:-webkit-autofill,
input:-internal-autofill-selected {
	background-color: transparent !important;
	background: transparent !important;
}

/* Kill the specific E8F0FE and other light blue autofill colors */
input:-webkit-autofill,
input:-internal-autofill-selected {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Newer WebKit selectors */
input:-webkit-autofill-and-obscured,
input:-webkit-autofill-and-obscured:hover,
input:-webkit-autofill-and-obscured:focus {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Override any light-dark() function usage */
input:-webkit-autofill {
	background: transparent !important;
	background-color: transparent !important;
}

/* Hard override: paint over UA autofill background with transparent inset */
/* remove inset paint-over to restore original look */
.nano-input input:-webkit-autofill,
.nano-input input:-internal-autofill-selected,
.nano-input input:-webkit-autofill:hover,
.nano-input input:-webkit-autofill:focus {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	background-clip: padding-box;
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
}

/* Restore transparent input background (don't overlay the field) */
.nano-input input {
	background: transparent;
}

.nano-input input:-webkit-autofill,
.nano-input input:-internal-autofill-selected {
	/* fully suppress UA autofill background */
	-webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
	box-shadow: 0 0 0 1000px rgba(0,0,0,0) inset !important;
	background-clip: padding-box !important;
	-webkit-text-fill-color: #fff !important;
}

/* Delay UA autofill background paint so the field keeps original color */
.nano-input input:-webkit-autofill,
.nano-input input:-webkit-autofill:focus {
	transition: background-color 600000s linear 0s, color 600000s linear 0s;
	caret-color: #fff;
}

.next-input, .go-input {
	appearance: none;
	border: 0;
	border-radius: 6px;
	padding: 6px 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	/* semi-transparent gradient like prod but with alpha */
	background: linear-gradient(90deg, rgba(0,255,209,0.78), rgba(90,140,255,0.78));
	color: #001510;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,255,209,0.2);
	transition: transform .12s ease, filter .2s ease;
	text-align: center;
	font-size: 11px;
	width: auto;
	min-width: 56px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.next-input:hover, .go-input:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
}

.next-input:active, .go-input:active {
	transform: translateY(0);
}

.hint { color: var(--muted); font-size: 14px; display: none; }

.multi-step-form {
	position: relative;
}

.form-step {
	transition: opacity 0.3s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.form-step.hidden {
	opacity: 0;
	pointer-events: none;
	transform: none !important;
	visibility: hidden;
}

.thanks-text {
	font: 600 18px/1.5 'Inter', system-ui;
	color: var(--fg);
	padding: 8px 6px 8px 8px;
    text-align: left;
}

/* Shake animation for validation errors */
input.shake {
	animation: shake 0.4s ease-in-out;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}


.site-footer {
	justify-content: center;
	color: var(--muted);
	padding: 16px 24px;
	text-align: center;
}

.site-footer p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	word-wrap: break-word;
	hyphens: auto;
	max-width: 100%;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.nano-input { padding: 12px; border-radius: 14px; }
	.nano-input input { font-size: 16px; }
	.go { padding: 10px 14px; border-radius: 10px; }

	/* Footer text optimization for mobile */
	.site-footer {
		padding: 12px 16px;
	}

	.site-footer p {
		font-size: 12px;
		line-height: 1.3;
		letter-spacing: 0.2px;
		word-break: break-word;
		hyphens: auto;
		max-width: 100%;
		text-align: center;
	}
}

/* Additional mobile optimization for very small screens */
@media (max-width: 480px) {
	.site-footer p {
		font-size: 11px;
		line-height: 1.4;
		padding: 0 8px;
	}
}