/* ============================================================
   AUREE — styles_footer.css
   Loaded before </body>. Covers everything below the fold:
   why-auree, how-it-works, our-team, pre-footer, footer, modal.
   ============================================================ */


/*  Sections- */

SECTION .section-header {
	max-width: 800px;
}

SECTION H2 {
	color: var(--color-text-brand);
}

/*  Why Auree */

.why-inner {
	max-width: var(--max-content);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
}

.section-header {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.why-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
}

.feature-card {
	flex: 1 1 calc(50% - 12px);
	min-width: 282px;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.card-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	fill: var(--color-text-brand);
}

.card-tag {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-text-brand);
	letter-spacing: 0.08em;
}

.feature-card h3 {
	color: var(--color-text-primary);
	margin-top: var(--sp-1);
}

.feature-card > p {
	font-size: 16px;
	line-height: 1.6;
	flex-grow: 1;
}

.card-divider {
	border: none;
	border-top: 1px solid var(--color-border-default);
	margin: var(--sp-1) 0;
}

.card-bullets {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding-left: 0;
}

.card-bullets li {
	list-style: none;
	font-size: 14px;
	color: var(--color-text-secondary);
	position: relative;
	padding-left: var(--sp-4);
}

.card-bullets li::before {
	content: '';
	display: block;
	position: absolute;
	left: var(--sp-1);
	top: calc(1em * 0.75);
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-action-primary-bg);
}

@media (min-width: 1264px) {
	.feature-card {
		flex: 1 1 calc(25% - 18px);
		min-width: 0;
	}
}


/*  How It Works  */

.hiw-inner {
	max-width: var(--max-content);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.hiw-deploy,
.hiw-architecture {
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
}

.hiw-deploy-body {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
}

.hiw-steps {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	list-style: none;
}

.hiw-step {
	display: flex;
	gap: var(--sp-3);
}
.hiw-step .graphic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-1);
}
.hiw-step .graphic .circle {
	border-radius: var(--radius-pill);
	background: var(--color-text-brand);
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}
.hiw-step .graphic .line {
	border-radius: var(--radius-pill);
	background: var(--color-text-brand);
	width: 2px;
	height: 100%;
	flex: 1 0 32px;
	position: relative;
}
.hiw-step .text P {
	font-size: 12px;
	color: var(--color-text-secondary);
}
.hiw-step .text .title {
	font-size: 16px;
	line-height: 24px;
	color: var(--color-text-primary);
}

.hiw-architecture .section-header h3 {
	color: var(--color-text-brand);
}

.hiw-step h3 {
	color: var(--color-text-primary);
}

.hiw-step p {
	font-size: 16px;
	line-height: 1.6;
}

.hiw-deploy-diagram {
	flex: 1;
	height: 410px;
	position: relative;
}

.diagram-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--dur-deliberate) var(--ease-in-out);
}

.diagram-slide-login {
	opacity: 1;
}
.diagram-slide-login::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
}

.diagram-slide-arch {
	opacity: 0;

	svg {
		object-fit: contain;
		fill: currentColor;
	}
}

.hiw-deploy-body.animate {
	--step-1-dur: 3s;

	--step-2-1-dur: 1.2s;
	--step-2-2-dur: 0.8s;
	--step-2-3-dur: 2s;
	--step-2-dur: calc(var(--step-2-1-dur) + var(--step-2-2-dur) + var(--step-2-3-dur));

	--step-3-1-dur: 0.6s;
	--step-3-2-dur: 0.6s;
	--step-3-3-dur: 0.8s;
	--step-3-4-dur: 0.6s;

	.hiw-step .graphic .circle {
		background: var(--color-bg-overlay);
		animation: step-circle-animation var(--dur-emphasis) ease-in-out;
		animation-fill-mode: forwards;
	}
	.hiw-step .graphic .line::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: var(--radius-pill);
		background: var(--color-bg-overlay);
		animation: step-line-animation var(--dur-deliberate) ease-in-out;
		animation-fill-mode: forwards;
	}

	.step1 .graphic .line::after {
		animation-delay: var(--dur-emphasis);
	}
	.step2 .graphic .circle {
		animation-delay: var(--step-1-dur);
	}
	.step2 .graphic .line::after {
		animation-delay: calc(var(--step-1-dur) + var(--dur-emphasis));
	}
	.step3 .graphic .circle {
		animation-delay: calc(var(--step-1-dur) + var(--step-2-dur));
	}
	.step3 .graphic .line::after {
		animation-delay: calc(var(--step-1-dur) + var(--step-2-dur) + var(--dur-emphasis));
	}

	.diagram-slide-login .mockup-card {
		animation: login var(--step-1-dur) linear forwards;
	}
	.diagram-slide-login {
		animation: fade-out var(--dur-emphasis) var(--ease-in-out) var(--step-1-dur) forwards, zoom-in var(--dur-deliberate) var(--ease-in-out) var(--step-1-dur) none;
	}
	.diagram-slide-arch {
		animation: fade-in var(--dur-deliberate) var(--ease-in-out) var(--step-1-dur) forwards;

		.schema-connection-bg {
			opacity: 0;
			animation: fade-in var(--step-2-2-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-1-dur)) forwards;
		}
		.schema-cp {
			transform: translateY(-30px);
			animation: slide-in var(--step-2-1-dur) var(--ease-in-out) var(--step-1-dur) forwards;
		}
		.schema-cloud {
			transform: translateY(30px);
			animation: slide-in var(--step-2-1-dur) var(--ease-in-out) var(--step-1-dur) forwards;
		}
		.schema-postgresql {
			transform: translateX(0);
			animation: blink calc(var(--step-3-1-dur) + var(--step-3-2-dur)) linear calc(var(--step-1-dur) + var(--step-2-dur)) forwards, move-right var(--step-3-3-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-dur) + var(--step-3-1-dur) + var(--step-3-2-dur)) forwards;
		}
		.schema-mysql {
			opacity: 1;
			animation: fade-out var(--step-3-2-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-dur) + var(--step-3-1-dur)) forwards;
		}
		.schema-mariadb {
			opacity: 1;
			animation: fade-out var(--step-3-2-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-dur) + var(--step-3-1-dur)) forwards;
		}
		.schema-or {
			opacity: 1;
			animation: fade-out var(--step-3-2-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-dur) + var(--step-3-1-dur)) forwards;
		}
		.schema-cluster {
			transform: translateX(20px);
			opacity: 0;
			animation: fade-in var(--step-3-3-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-dur) + var(--step-3-1-dur) + var(--step-3-2-dur)) forwards;
		}
		.schema-connection-dots {
			opacity: 0;
			animation: fade-in var(--step-3-4-dur) var(--ease-in-out) calc(var(--step-1-dur) + var(--step-2-dur) + var(--step-3-1-dur) + var(--step-3-2-dur) + var(--step-3-3-dur)) forwards;
		}
	}
}
@keyframes step-circle-animation {
	to {
		background: var(--color-action-primary-bg);
	}
}
@keyframes step-line-animation {
	to {
		height: 0;
	}
}
@keyframes login {
	0% {
		transform: perspective(600px) rotate3d(0, 1, 0, 0deg) scale3d(1, 1, 1);
	}
	60% {
		transform: perspective(600px) rotate3d(0, 1, 0, 10deg) scale3d(1.2, 1.2, 1.2);
	}
	100% {
		transform: perspective(600px) rotate3d(0, 1, 0, 20deg) scale3d(1.4, 1.4, 1.4);
	}
}
@keyframes zoom-in {
	0% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(2, 2);
		visibility: hidden;
	}
}
@keyframes fade-out {
	to { opacity: 0; }
}
@keyframes fade-in {
	to { opacity: 1; }
}
@keyframes slide-in {
	to {
		transform: translateY(0);
	}
}
@keyframes blink {
	0% {
		fill: var(--color-text-primary);
	}
	40% {
		fill: var(--color-text-brand);
	}
	60% {
		fill: var(--color-text-brand);
	}
	0% {
		fill: var(--color-text-primary);
	}
}
@keyframes move-right {
	to {
		transform: translateX(40px);
	}
}

/* Login mockup */
.mockup-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	width: 240px;
	max-width: calc(100% - var(--sp-8));
}

.mockup-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.mockup-label {
	font-size: 12px;
	color: var(--color-text-secondary);
	letter-spacing: 0.02em;
}

.mockup-input {
	height: 36px;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: 0 var(--sp-3);
	display: flex;
	align-items: center;
}

.mockup-value {
	font-size: 16px;
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mockup-dots {
	font-size: 16px;
	color: var(--color-text-primary);
	letter-spacing: 0.1em;
}

.hiw-arch-body {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-10);
}

.hiw-arch-diagram {
	flex: 0 0 50%;
	max-width: 540px;
	height: auto;
	align-self: center;
	text-align: center;
}
.hiw-arch-diagram IMG, .hiw-arch-diagram SVG {
	width: 350px;
	max-width: 100%;
	margin: 0 auto;
}

.hiw-arch-features {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
	list-style: none;
}

.arch-feature {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
}

.arch-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	fill: var(--color-text-brand);
}
.arch-icon.icon-reload {
	width: 20px;
	height: 34px;
}
.arch-icon.icon-shield {
	width: 24px;
	height: 31px;
}
.arch-icon.icon-wallet {
	width: 24px;
	height: 32px;
}
.arch-icon.icon-three-circles {
	width: 24px;
	height: 32px;
}

.arch-feature h3 {
	font-size: 21px;
	color: var(--color-text-primary);
	margin-bottom: var(--sp-1);
}

.arch-feature p {
	font-size: 16px;
	color: var(--color-text-secondary);
}

@media (max-width: 767px) {
	.hiw-deploy-body {
		flex-direction: column;
	}

	.hiw-steps {
		flex: none;
		width: 100%;
	}

	.hiw-deploy-diagram {
		flex: none;
		width: 100%;
		aspect-ratio: 3 / 2;
	}

	.hiw-arch-body {
		flex-direction: column;
	}

	.hiw-arch-diagram {
		flex: none;
		width: 100%;
		max-width: none;
	}
}


/*  Our Team  */

.team-inner {
	max-width: var(--max-content);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
}

.team-cards {
	display: flex;
	flex-wrap: wrap;
	padding-top: 48px;
	gap: calc(var(--sp-4) + 48px) var(--sp-4);
}

.team-card {
	flex: 1 0 calc(50% - 12px);
	min-width: 282px;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	padding: calc(var(--sp-6) + 24px) var(--sp-6) var(--sp-6);
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	position: relative;
}

.team-avatar {
	position: absolute;
	width: 96px;
	height: 96px;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text-brand);
	flex-shrink: 0;
	letter-spacing: 0.02em;
}

.team-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.team-names {
	display: flex;
	flex-direction: column;
	height: 64px;
	justify-content: center;
}

.team-card h3 {
	font-size: 21px;
	color: var(--color-text-primary);
}

.team-role {
	font-size: 16px;
	color: var(--color-text-secondary);
}

.team-card p {
	font-size: 16px;
	color: var(--color-text-secondary);
}

.team-linkedin {
	position: absolute;
	top: var(--sp-6);
	right: var(--sp-6);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-text-link);
	transition: color var(--dur-fast) var(--ease-out);
}

.team-linkedin svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.team-linkedin:hover {
	color: var(--color-text-primary);
	text-decoration: none;
}

@media (min-width: 875px) {
	.team-cards {
		padding-top: 0;
		gap: var(--sp-4);
	}

	.team-card {
		min-width: 400px;
		padding-top: var(--sp-6);
	}

	.team-avatar {
		position: static;
		width: 64px;
		height: 64px;
		transform: none;
	}
}


/*  Pre-footer */

.pre-footer-inner {
	max-width: var(--max-content);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-4);
}

.pre-footer-inner p {
	font-size: 21px;
	font-weight: 700;
	max-width: 800px;
	color: var(--color-text-secondary);
}


/*  Footer  */

#site-footer {
	position: relative;
	padding: 0 var(--page-margin) var(--page-margin);
}

.footer-inner {
	max-width: var(--max-content);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
	border-top: 1px solid var(--color-text-tertiary);
	padding-top: var(--section-spacer);
	position: relative;
}

.footer-top {
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
}

.footer-top IMG.desktop {
	display: none;
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.footer-linkedin {
	display: flex;
	width: 24px;
	height: 24px;
	color: var(--color-text-primary);
	transition: color var(--dur-fast) var(--ease-out);
}

.footer-linkedin svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.footer-linkedin:hover {
	color: var(--color-text-link);
	text-decoration: none;
}

.footer-address {
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-primary);
}

.footer-copy {
	font-size: 12px;
	color: var(--color-text-tertiary);

	SPAN::after {
		content: ' \2022 ';
		margin-left: var(--sp-2);
		margin-right: var(--sp-1);
		display: inline-block;
	}
	SPAN:last-child:after {
		display: none;
	}
}

.footer-fish {
	display: none;
}

@media (min-width: 480px) {
	.footer-top {
		flex-direction: row;
		gap: var(--sp-16);
	}
	
	.footer-top IMG.mobile {
		display: none;
	}
	.footer-top IMG.desktop {
		display: block;
	}
}

@media (min-width: 768px) {
	#site-footer {
		padding-bottom: 64px;
	}

	.footer-fish {
		display: block;
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translateY(-50%);
		width: 211px;
		height: auto;
		pointer-events: none;
	}
}


/*  Contact modal */

#contact-modal {
	padding: 0;
	border: none;
	background: transparent;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
}

#contact-modal[open] {
	display: grid;
	place-items: center;
}

#contact-modal::backdrop {
	background: rgba(0, 0, 0, 0.60);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.modal-box {
	width: min(900px, 100vw - 32px);
	max-height: calc(100vh - 64px);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-xl);
	box-shadow: 0 16px 24px rgba(0, 0, 0, 0.30);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal-header {
	background: var(--color-bg-raised);
	height: 56px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0 var(--sp-5) 0 var(--sp-6);
	border-bottom: 1px solid var(--color-border-subtle);
}

.modal-header h2 {
	flex: 1;
	font-size: 21px;
	color: var(--color-text-primary);
}

.modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--color-text-tertiary);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.modal-close:hover {
	background: rgba(248, 249, 250, 0.08);
	color: var(--color-text-primary);
}

.modal-body {
	display: flex;
	flex: 1;
	overflow-y: auto;
	gap: var(--sp-8);
	padding: var(--sp-8);
}

.modal-info {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.modal-contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	list-style: none;
	padding: 0;
}

.modal-contact-list li {
	display: flex;
	flex-direction: column;
}

.contact-label {
	font-size: 12px;
	color: var(--color-text-secondary);
}

.modal-contact-list a,
.modal-contact-list span:not(.contact-label) {
	color: var(--color-text-primary);
}

.modal-divider {
	flex-shrink: 0;
	width: 1px;
	background: var(--color-border-default);
	align-self: stretch;
}

.modal-form {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.form-field label {
	font-size: 12px;
	color: var(--color-text-secondary);
}

.form-field input,
.form-field textarea {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: 0 var(--sp-3);
	height: 36px;
	font-size: 16px;
	color: var(--color-text-primary);
	width: 100%;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form-field textarea {
	height: auto;
	padding: var(--sp-2) var(--sp-3);
	resize: none;
	line-height: 1.6;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
	color: var(--color-text-tertiary);
}

.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--color-input-focus-border);
}

.form-field.has-error input,
.form-field.has-error textarea {
	border-color: var(--color-semantic-error);
}

.form-field.has-error input:focus,
.form-field.has-error textarea:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.30);
}

.field-error {
	font-size: 12px;
	color: var(--color-semantic-error);
}

.form-actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	align-items: flex-start;
	margin-top: var(--sp-2);
}

.recaptcha-notice {
	font-size: 12px;
	color: var(--color-text-tertiary);
}

.recaptcha-notice a {
	color: var(--color-text-tertiary);
	text-decoration: underline;
}

.form-success {
	font-size: 16px;
	color: var(--color-text-primary);
	padding: 0;
}

.form-error {
	font-size: 16px;
	color: var(--color-semantic-error);
}

/* Mobile: stack columns */
@media (max-width: 767px) {
	.modal-box {
		max-height: calc(100vh - 32px);
	}

	.modal-body {
		flex-direction: column;
		padding: var(--sp-6);
		gap: var(--sp-6);
	}

	.modal-info {
		flex: none;
	}

	.modal-divider {
		width: 100%;
		height: 1px;
	}
}

.grecaptcha-badge {
	display: none;
}