:root {
	--portal-ink: #132238;
	--portal-muted: #607086;
	--portal-primary: #087f8c;
	--portal-primary-dark: #05616b;
	--portal-accent: #ffb703;
	--portal-surface: #f5f8fb;
	--portal-border: #dce5ec;
}

html {
	scroll-behavior: smooth;
}

body.public-portal {
	background: #fff;
	color: var(--portal-ink);
	font-family: "Open Sans", Arial, sans-serif;
	min-height: 100vh;
}

.public-skip-link {
	background: #fff;
	left: 1rem;
	padding: .75rem 1rem;
	position: fixed;
	top: -5rem;
	z-index: 1100;
}

.public-skip-link:focus {
	top: 1rem;
}

.public-header {
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid rgba(19, 34, 56, .08);
	position: sticky;
	top: 0;
	z-index: 1020;
	backdrop-filter: blur(16px);
}

.public-header .navbar {
	min-height: 76px;
}

.public-brand {
	align-items: center;
	color: var(--portal-ink);
	display: inline-flex;
	font-size: 1.15rem;
	gap: .7rem;
}

.public-brand:hover {
	color: var(--portal-primary);
}

.public-brand-mark {
	align-items: center;
	background: linear-gradient(145deg, var(--portal-primary), #12a6a7);
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(8, 127, 140, .2);
	color: #fff;
	display: inline-flex;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.public-header .nav-link {
	color: #394a60;
	font-weight: 600;
	padding: .75rem 1rem !important;
}

.public-header .nav-link:hover,
.public-header .nav-link:focus {
	color: var(--portal-primary);
}

.public-portal .btn-primary {
	background: var(--portal-primary);
	border-color: var(--portal-primary);
	box-shadow: 0 9px 22px rgba(8, 127, 140, .18);
}

.public-portal .btn-primary:hover,
.public-portal .btn-primary:focus {
	background: var(--portal-primary-dark);
	border-color: var(--portal-primary-dark);
}

.public-hero {
	background:
		radial-gradient(circle at 85% 15%, rgba(255, 183, 3, .16), transparent 24rem),
		radial-gradient(circle at 10% 70%, rgba(8, 127, 140, .1), transparent 28rem),
		linear-gradient(180deg, #f9fcfd 0%, #fff 100%);
	overflow: hidden;
	padding: 7rem 0 6rem;
}

.eyebrow {
	color: var(--portal-primary);
	display: inline-block;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .12em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.public-hero h1 {
	font-size: clamp(2.6rem, 6vw, 5rem);
	font-weight: 800;
	letter-spacing: -.055em;
	line-height: 1.02;
	margin-bottom: 1.5rem;
	max-width: 760px;
}

.hero-copy {
	color: var(--portal-muted);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.75;
	margin-bottom: 2rem;
	max-width: 690px;
}

.hero-note {
	color: var(--portal-muted);
	font-size: .85rem;
	margin: 1.5rem 0 0;
}

.hero-note i {
	color: var(--portal-primary);
	margin-right: .35rem;
}

.hero-visual {
	background: #fff;
	border: 1px solid rgba(8, 127, 140, .13);
	border-radius: 24px;
	box-shadow: 0 30px 80px rgba(19, 34, 56, .15);
	padding: 1.25rem;
	position: relative;
	transform: rotate(1.5deg);
}

.visual-toolbar {
	display: flex;
	gap: .4rem;
	margin-bottom: 1.3rem;
}

.visual-toolbar span {
	background: #d8e1e9;
	border-radius: 50%;
	height: 8px;
	width: 8px;
}

.visual-card {
	align-items: center;
	background: var(--portal-surface);
	border: 1px solid var(--portal-border);
	border-radius: 16px;
	display: flex;
	gap: 1rem;
	margin-top: .8rem;
	padding: 1rem;
}

.visual-card-primary {
	background: linear-gradient(135deg, #087f8c, #075d72);
	border: 0;
	color: #fff;
	margin: 0 0 1.5rem;
	padding: 1.4rem;
}

.visual-card small,
.visual-card strong {
	display: block;
}

.visual-card small {
	color: var(--portal-muted);
	font-size: .72rem;
	margin-bottom: .2rem;
}

.visual-card-primary small {
	color: rgba(255, 255, 255, .7);
}

.visual-icon {
	align-items: center;
	background: rgba(255, 255, 255, .16);
	border-radius: 12px;
	display: flex;
	font-size: 1.4rem;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.visual-avatar {
	align-items: center;
	background: #d8f0f0;
	border-radius: 12px;
	color: var(--portal-primary-dark);
	display: flex;
	font-size: .75rem;
	font-weight: 800;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.visual-avatar-alt {
	background: #fff0c4;
	color: #8b6200;
}

.status-pill {
	background: #d8f0f0;
	border-radius: 999px;
	color: var(--portal-primary-dark);
	font-size: .68rem;
	font-weight: 700;
	margin-left: auto;
	padding: .35rem .65rem;
}

.status-pill-alt {
	background: #fff0c4;
	color: #7d5900;
}

.public-section {
	padding: 6rem 0;
}

.section-heading {
	margin-bottom: 3rem;
	max-width: 720px;
}

.section-heading h2,
.public-cta h2 {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -.04em;
}

.feature-card {
	background: #fff;
	border: 1px solid var(--portal-border);
	border-radius: 20px;
	box-shadow: 0 15px 45px rgba(19, 34, 56, .06);
	padding: 2rem;
	transition: transform .2s ease, box-shadow .2s ease;
}

.feature-card:hover {
	box-shadow: 0 22px 55px rgba(19, 34, 56, .1);
	transform: translateY(-4px);
}

.feature-icon {
	align-items: center;
	background: #e5f5f5;
	border-radius: 14px;
	color: var(--portal-primary);
	display: flex;
	font-size: 1.25rem;
	height: 52px;
	justify-content: center;
	margin-bottom: 1.5rem;
	width: 52px;
}

.feature-card h3 {
	font-size: 1.2rem;
	font-weight: 700;
}

.feature-card p {
	color: var(--portal-muted);
	line-height: 1.7;
	margin: 0;
}

.public-cta {
	padding: 0 0 6rem;
}

.cta-panel {
	background: linear-gradient(135deg, #075d72, #087f8c);
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba(7, 93, 114, .2);
	color: #fff;
	padding: clamp(2rem, 5vw, 4rem);
}

.cta-panel p {
	color: rgba(255, 255, 255, .75);
}

.eyebrow-light {
	color: #8ce1dd;
}

.registration-hero {
	background: linear-gradient(180deg, #f5fafb 0%, #fff 100%);
	min-height: calc(100vh - 148px);
	padding: 5rem 0 6rem;
}

.registration-heading {
	margin-bottom: 2.5rem;
	max-width: 720px;
}

.registration-heading h1,
.success-card h1 {
	font-size: clamp(2.3rem, 5vw, 3.7rem);
	font-weight: 800;
	letter-spacing: -.045em;
}

.registration-heading p,
.success-card > p {
	color: var(--portal-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

.registration-shell {
	background: #fff;
	border: 1px solid var(--portal-border);
	border-radius: 24px;
	box-shadow: 0 26px 70px rgba(19, 34, 56, .1);
	display: grid;
	grid-template-columns: minmax(260px, .8fr) minmax(0, 1.5fr);
	overflow: hidden;
}

.registration-aside {
	background: linear-gradient(160deg, #132238, #075d72);
	color: #fff;
	padding: clamp(2rem, 4vw, 3.5rem);
}

.registration-aside h2 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.35;
}

.registration-benefits {
	list-style: none;
	margin: 2rem 0;
	padding: 0;
}

.registration-benefits li {
	align-items: flex-start;
	display: flex;
	gap: .8rem;
	margin-bottom: 1.1rem;
}

.registration-benefits i {
	align-items: center;
	background: rgba(140, 225, 221, .15);
	border-radius: 50%;
	color: #8ce1dd;
	display: flex;
	flex: 0 0 24px;
	height: 24px;
	justify-content: center;
}

.review-note {
	align-items: flex-start;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	display: flex;
	gap: .8rem;
	margin-top: 2rem;
	padding: 1rem;
}

.review-note strong,
.review-note span {
	display: block;
}

.review-note span {
	color: rgba(255, 255, 255, .7);
	font-size: .78rem;
	line-height: 1.5;
	margin-top: .15rem;
}

.registration-form-panel {
	padding: clamp(2rem, 5vw, 4rem);
}

.form-section-title {
	border-bottom: 1px solid var(--portal-border);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .04em;
	margin-bottom: 1.25rem;
	padding-bottom: .75rem;
	text-transform: uppercase;
}

.registration-form .form-label {
	color: #34445a;
	font-size: .82rem;
	font-weight: 700;
}

.registration-form .form-control,
.registration-form .form-select {
	border-color: #cfd9e2;
	border-radius: 10px;
	min-height: 46px;
}

.registration-form .form-control:focus,
.registration-form .form-select:focus {
	border-color: var(--portal-primary);
	box-shadow: 0 0 0 .2rem rgba(8, 127, 140, .12);
}

.form-disclosure {
	color: var(--portal-muted);
	font-size: .78rem;
	line-height: 1.55;
}

.registration-honeypot {
	height: 0;
	left: -10000px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 0;
}

.success-card {
	background: #fff;
	border: 1px solid var(--portal-border);
	border-radius: 24px;
	box-shadow: 0 25px 65px rgba(19, 34, 56, .1);
	max-width: 680px;
	padding: clamp(2.5rem, 7vw, 5rem);
}

.success-icon {
	align-items: center;
	background: #dff5ee;
	border-radius: 50%;
	color: #16855b;
	display: flex;
	font-size: 1.6rem;
	height: 72px;
	justify-content: center;
	margin: 0 auto 1.5rem;
	width: 72px;
}

.reference-box {
	background: var(--portal-surface);
	border: 1px dashed #b9c8d4;
	border-radius: 14px;
	margin: 2rem 0;
	padding: 1rem;
}

.reference-box small,
.reference-box strong {
	display: block;
}

.reference-box small {
	color: var(--portal-muted);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.reference-box strong {
	font-size: 1.1rem;
	letter-spacing: .08em;
	margin-top: .25rem;
}

.public-footer {
	background: #101d2d;
	color: rgba(255, 255, 255, .68);
	font-size: .8rem;
	padding: 1.5rem 0;
}

.public-footer strong {
	color: #fff;
}

@media (max-width: 991.98px) {
	.public-header .navbar-collapse {
		background: #fff;
		border-top: 1px solid var(--portal-border);
		margin: .75rem -12px 0;
		padding: 1rem 12px;
	}

	.public-hero {
		padding: 5rem 0;
	}

	.hero-visual {
		transform: none;
	}

	.registration-shell {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.public-header .navbar {
		min-height: 66px;
	}

	.public-brand {
		font-size: .98rem;
	}

	.public-brand-mark {
		height: 34px;
		width: 34px;
	}

	.public-hero,
	.registration-hero,
	.public-section {
		padding: 4rem 0;
	}

	.registration-shell,
	.success-card,
	.cta-panel {
		border-radius: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}