@font-face {
		font-family: 'Lexend;';
		src: url('./fonts/Lexend-VariableFont_wght.ttf') format('ttf');
		font-weight: normal;
		font-style: normal;
	}

	body {
		font-family: 'MiFuente', sans-serif;
	}

	:root {
		--landing-bg: #0b0b0e;
		--landing-panel: #1b1b20;
		--landing-alternate: #141318;
		--landing-gold: #e0b541;
		--landing-text: #f4f3f5;
		--landing-muted: #aaa8ae;
		--site-container-width: 1440px;
	}

	body {
		background: var(--landing-bg);
		margin: 0;
		color: var(--landing-text);
		letter-spacing: .15px;
	}

	.landing-public .site-container {
		max-width: none;
	}

	.landing * {
		box-sizing: border-box
	}

	.eyebrow.title {
		font-size: 14px !important;
	}



	body.modal-open {
		overflow: hidden;
	}

	.landing a {
		color: inherit
	}

	.landing .container {
		max-width: 1120px;
		margin: auto;
		padding: 0 24px
	}

	.landing .hero {
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 100%;
		max-width: var(--site-container-width);
		min-height: 345px;
		margin-inline: auto;

		background-color: #080808;
		background-image: url("images/landing-hero.webp");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.landing .hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;

		background:

			linear-gradient(to bottom,
				transparent 45%,
				rgba(11, 11, 14, 0.45) 75%,
				#0b0b0e 100%),


			linear-gradient(to right, rgb(11 11 15) 0%, rgb(11 11 15 / 80%) 8%, transparent 20%, transparent 80%, rgb(11 11 15 / 80%) 92%, rgb(11 11 15) 100%)
	}

	.landing .hero-overlay {
		min-height: 345px;
		width: 100%;
		z-index: 100;
	}

	.landing nav {
		max-width: 1120px;
		margin: auto;
		padding: 20px 24px;
		text-align: right
	}

	.landing .login {
		border: 1px solid var(--landing-gold);
		color: var(--landing-gold);
		display: inline-block;
		text-decoration: none;
		cursor: pointer;
		border-radius: 28px;
		padding: 12px 25px;
		font-size: 13px;
		font-weight: bold;
		background: #0b0b0e91
	}

	.landing .login:hover {
		box-shadow: 0 10px 30px rgb(217 178 47 / 68%);
	}

	.landing .hero-copy {
		text-align: center;
		padding: 30px 20px 72px;
		text-shadow: 0 2px 5px rgb(0 0 0);
	}

	.landing .eyebrow {
		font-size: 11px;
		letter-spacing: 2.2px;
		color: var(--landing-gold);
		font-weight: bold
	}

	.landing .eyebrow strong {
		color: var(--landing-text);
		font-weight: inherit;

	}

	.landing .hero h1 {
		font-size: clamp(35px, 5vw, 53px);
		line-height: 1.13;
		margin: 15px 0
	}

	.landing .hero h1 span {
		color: var(--landing-gold)
	}

	.landing p {
		color: var(--landing-muted);
		font-size: 15px;
		line-height: 1.6
	}

	.landing .hero p {
		color: #e1dfe2
	}

	.landing .section {
		padding: 64px 0
	}

	.landing .alternate {
		background: var(--landing-alternate);
		border-top: 1px solid #242229;
		border-bottom: 1px solid #242229
	}

	.landing h2 {
		font-size: 27px;
		margin: 0 0 22px
	}

	.landing h3 {
		font-size: 18px;
		margin: 9px 0
	}

	.landing .choices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 22px
	}

	.landing .choice {
		background: var(--landing-panel);
		border: 1px solid #333139;
		border-radius: 15px;
		padding: 28px 30px;
		min-height: 218px;
		transition: all 0.8s ease;
	}

	.landing .choice:hover {
		border-color: var(--landing-gold);
		box-shadow: 0 10px 30px rgba(217, 178, 47, 0.20);
	}

	.landing .choice p {
		min-height: 54px;
		margin: 12px 0 22px
	}

	.landing .title-choice {
		color: #99969d
	}

	.landing .choice:hover .title-choice {
		color: var(--landing-gold)
	}

	.landing .btn {
		display: inline-block;
		text-decoration: none;
		border: 0;
		cursor: pointer;
		font-family: inherit;
		border-radius: 28px;
		padding: 12px 25px;
		font-size: 13px;
		font-weight: bold;
		transition: all 0.3s ease;
	}

	.landing .btn:hover {
		transform: translateY(-2px)
	}

	.landing .btn.disabled{
		background: #e0b54145;
  cursor: auto;
	}
	.landing .btn.disabled:hover{
	transform: none;
	}

	.landing .gold {
		background: var(--landing-gold);
		color: #18140a
	}

	.landing .outline {
		background: transparent;
		border: 1px solid #55525a;
		color: #f4f3f5
	}

	.landing .choice:hover .outline {
		background: var(--landing-gold);
		color: #18140a
	}


	.landing .note {
		margin-top: 24px;
		font-size: 13px
	}

	.landing .three {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 36px;
		margin-top: 30px
	}

	.landing .three i {
		display: block;
		width: 32px;
		height: 2px;
		background: var(--landing-gold)
	}

	.landing .three h3 {
		margin-top: 10px
	}

	.landing .three p {
		margin: 0
	}

	.landing .four {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 15px;
		margin-top: 20px
	}

	.landing .four>div {
		background: var(--landing-panel);
		border: 1px solid #302e35;
		border-radius: 11px;
		padding: 20px;
		min-height: 95px;
		font-size: 14px;
		line-height: 1.5
	}

	.landing .cta {
		text-align: center
	}

	.landing .cta h2 {
		margin-bottom: 10px
	}

	.landing .actions {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin: 24px 0
	}

	.landing .contact {
		font-size: 12px;
		margin-top: 30px
	}

	.landing .contact a {
		color: var(--landing-gold)
	}

	/* Pop-up (native <dialog>) */
	.landing dialog.modal {
		width: min(94vw, 610px);
		max-height: 92vh;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--landing-text);
		overflow: auto
	}

	.landing dialog.modal::backdrop {
		background: rgba(0, 0, 0, .78);
		 backdrop-filter: blur(7px);
	}

	.landing .form-card {
		position: relative;
		background: var(--landing-panel);
		border: 1px solid #39343a;
		border-radius: 16px;
		padding: 36px
	}

	.landing .modal-close {
		position: absolute;
		top: 12px;
		right: 14px;
		width: 36px;
		height: 36px;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--landing-muted);
		font-size: 26px;
		line-height: 1;
		cursor: pointer
	}

	.landing .modal-close:hover,
	.landing .modal-close:focus-visible {
		color: var(--landing-gold)
	}

	.landing .form-card .eyebrow {
		text-align: center
	}

	.landing .form-card h2 {
		text-align: center;
		font-size: 30px;
		margin: 12px 0 5px
	}

	.landing .form-card .intro {
		text-align: center;
		margin: 0 0 30px
	}

	.landing .field {
		display: block;
		margin-bottom: 18px;
		font-size: 14px;
		font-weight: bold
	}

	.landing .field input,
	.landing .field textarea,
	.landing .field select {
		display: block;
		width: 100%;
		margin-top: 8px;
		background: #101014;
		border: 1px solid #48444b;
		color: #fff;
		border-radius: 8px;
		padding: 13px 14px;
		font: inherit;
		font-weight: normal;
		outline: none
	}

	.landing .field input:focus,
	.landing .field textarea:focus,
	.landing .field select:focus {
		border-color: var(--landing-gold)
	}

	.landing .field textarea {
		resize: vertical;
		min-height: 100px
	}

	.landing .terms {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--landing-muted);
		margin: 20px 0
	}

	.landing .terms input {
		accent-color: var(--landing-gold);
		margin-top: 3px
	}

	.landing .submit {
		width: 100%;
		font-size: 14px
	}

	.landing .success {
		display: none;
		color: var(--landing-gold);
		text-align: center;
		margin-top: 16px
	}


	.landing .modal {
		scrollbar-width: thin;
		scrollbar-color: #777780 #1b1b20;
	}

	.landing .modal::-webkit-scrollbar {
		width: 6px;
	}

	.landing .modal::-webkit-scrollbar-track {
		background: #1b1b20;
		border-radius: 10px;
	}

	.landing .modal::-webkit-scrollbar-thumb {
		background: #777780;
		border-radius: 10px;
		border: 1px solid #1b1b20;
	}

	.landing .modal::-webkit-scrollbar-thumb:hover {
		background: #a0a0a8;
	}
	.landing .landing-error {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    margin-top: 20px;

    background: #e04b4b12;
    border: 1px solid #e04b4b55;
    border-radius: 12px;

    animation: errorAppear .3s ease;
}

.landing .error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    background: #e04b4b25;
    border: 1px solid #e04b4b80;

    color: #ff7777;
    font-weight: bold;
    font-size: 16px;
}

.landing .error-content strong {
    display: block;
    color: #ff7777;
    font-size: 14px;
    margin-bottom: 5px;
}

.landing .error-content p {
    margin: 0;
    color: #c4bfc3;
    font-size: 13px;
    line-height: 1.5;
}
.landing .landing-error {
    display: none;
}
.landing .landing-success-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;

    align-items: center;
    justify-content: center;

    padding: 20px;
   background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(7px);
}

.landing .landing-success-popup.active {
    display: flex;
    animation: successFade .3s ease;
}

.landing .success-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 42px 32px 30px;

    text-align: center;
    background: var(--landing-panel);
    border: 1px solid #e0b54165;
    border-radius: 18px;

    box-shadow: 0 20px 80px #0009;
    animation: successSlide .4s ease;
}

.landing .success-close {
    position: absolute;
    top: 12px;
    right: 15px;
    border: 0;
    background: transparent;
    color: var(--landing-muted);
    font-size: 27px;
    cursor: pointer;
}

.landing .success-icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 22px;
    border-radius: 50%;

    color: var(--landing-gold);
    background: #e0b54118;
    border: 1px solid #e0b54180;
}

.landing .success-icon svg {
    width: 34px;
    height: 34px;
}

.landing .success-card h2 {
    font-size: 29px;
    margin: 14px 0 10px;
    color: var(--landing-text);
}

.landing .success-card p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 26px;
}

.landing .success-button {
    width: 100%;
}

.landing .success-footer {
    border-top: 1px solid #333139;
    margin-top: 25px;
    padding-top: 18px;
    color: var(--landing-muted);
    font-size: 11px;
    letter-spacing: .5px;
}

@keyframes successFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes successSlide {
    from {
        opacity: 0;
        transform: translateY(15px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes errorAppear {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



	@media(max-width:700px) {

		.landing .hero,
		.landing .hero-overlay {
			min-height: 310px
		}

		.landing .hero-copy {
			padding-top: 35px
		}

		.landing .section {
			padding: 46px 0
		}

		.landing .choices,
		.landing .three {
			grid-template-columns: 1fr
		}

		.landing .four {
			grid-template-columns: 1fr 1fr
		}

		.landing .choice p {
			min-height: 0
		}

		.landing .form-card {
			padding: 30px 20px 25px
		}
	}

	@media(max-width:420px) {
		.landing .four {
			grid-template-columns: 1fr
		}

		.landing .actions {
			flex-direction: column;
			align-items: center
		}
	}