:root {
	--primary: #13ec5b;
	--background-dark-navy: #0a0f1a;
	--glass-bg: rgba(10, 15, 26, 0.7);
	--energy-glow: rgba(19, 236, 91, 0.4);
	--primary-dark: #0eb545;
	--background-light: #f6f8f6;
	--background-dark: #102216;
	--surface-dark: #152b1c;
	--surface-darker: #0a160e;
	--navy-dark: #0a0f1a;
	--navy-light: #161e2d;
	--amber: #F59E0B;
	--amber-dark: #D97706;
	--steel: #1C1C1E;
	--panel: #1E1E21;
	--panel-inner: #242428;
	--border: #3A3A3E;
	--muted: #8A8A96;
	font-family: Space Grotesk, sans-serif;
	--color: #E4E4E8;
	--card-border: rgba(19, 236, 91, 0.15);
}

body {
	font-family: Space Grotesk, sans-serif;
}

/* ── Smooth scrolling ── */
html {
	scroll-behavior: smooth;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #102216;
}

::-webkit-scrollbar-thumb {
	background: #13ec5b;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #0ed14f;
}

/* Modal-specific scrollbar override */
.modal-box::-webkit-scrollbar {
	width: 4px;
}

.modal-box::-webkit-scrollbar-thumb {
	background: #4ade80;
	border-radius: 2px;
}

/* ── Navigation ── */
.glass-nav {
	background: rgba(16, 34, 22, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(19, 236, 91, 0.1);
}

/* ── Hero ── */
.hero-text-shadow {
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* ── Card hover glow ── */
.card-hover-glow {
	transition: all 0.3s ease;
}

.card-hover-glow:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 40px -10px rgba(19, 236, 91, 0.15);
	border-color: rgba(19, 236, 91, 0.3);
}

/* ── Animation utilities ── */
.fade-in-up {
	animation: fadeInUp 0.8s ease-out forwards;
	opacity: 0;
	transform: translateY(20px);
}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Staggered animation delays ── */
.delay-100 {
	animation-delay: 100ms;
}

.delay-200 {
	animation-delay: 200ms;
}

.delay-300 {
	animation-delay: 300ms;
}

.delay-400 {
	animation-delay: 400ms;
}

/* ── Spin animation ── */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.animate-spin {
	animation: spin 1s linear infinite;
}

.animate-spin-slow {
	animation: spin 2.8s linear infinite;
}

/* ── Loader ── */
#loader {
	position: fixed;
	inset: 0;
	background: rgba(16, 34, 22, 1);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: opacity 0.6s ease, visibility 0.6s;
}

#loader.hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

#loader h2 {
	color: #fff;
	margin-top: 0.5rem;
	letter-spacing: 0.18em;
}

/* ── Layer utilities (merged) ── */
@layer utilities {
	.glass-card {
		@apply bg-white/5 backdrop-blur-md border border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.37)];
	}

	.glass-panel {
		@apply bg-surface-dark/40 backdrop-blur-xl border border-card-border;
	}

	.glow-border {
		@apply border-primary/30 shadow-[0_0_15px_rgba(19,236,91,0.1)];
	}

	.glow-border:hover {
		box-shadow: 0 0 25px -5px rgba(19, 236, 91, 0.2);
		border-color: rgba(19, 236, 91, 0.4);
	}

	.text-glow {
		text-shadow: 0 0 15px rgba(19, 236, 91, 0.3);
	}

	.energy-line {
		background: linear-gradient(to bottom, transparent, #13ec5b, #13ec5b, transparent);
		box-shadow: 0 0 20px rgba(19, 236, 91, 0.5);
	}

	.circuit-bg {
		background-image: radial-gradient(#13ec5b15 1px, transparent 1px);
		background-size: 30px 30px;
	}

	.service-image-mask {
		clip-path: polygon(5% 0, 100% 0, 95% 100%, 0% 100%);
	}
}

/* ── Glassmorphism utilities ── */
.glass-morphism {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(19, 236, 91, 0.1);
}

.glass-panel {
	background: rgba(16, 34, 22, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(19, 236, 91, 0.1);
}

.glass-card {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.05);
}

.glass-overlay {
	background: rgba(16, 34, 22, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* ── Material Symbols ── */
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Timeline ── */
.timeline-node::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #13ec5b;
	filter: blur(8px);
	opacity: 0.6;
}

.milestone-card:hover {
	border-color: #13ec5b;
	box-shadow: 0 0 30px rgba(19, 236, 91, 0.15);
	transform: translateY(-4px);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Map filter ── */
.map-dark-filter {
	filter: grayscale(100%) invert(90%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* ── Border decorations ── */
.technical-border {
	position: relative;
}

.technical-border::after {
	content: '';
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #13ec5b;
	border-right: 2px solid #13ec5b;
}

.technical-border::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -1px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #13ec5b;
	border-left: 2px solid #13ec5b;
}

/* ── Hover zoom ── */
.group:hover .zoom-image {
	transform: scale(1.05);
}

/* ── Filter buttons ── */
.filter-btn {
	transition: all 0.3s ease;
}

.filter-btn.active {
	background-color: #13ec5b;
	color: #102216;
	font-weight: 600;
	box-shadow: 0 0 15px rgba(19, 236, 91, 0.4);
}

/* ── Project cards ── */
.project-card {
	opacity: 1;
	transform: translateY(0);
}

/* ── Text utilities ── */
.text-shadow-sm {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ── Glow effects ── */
.energy-glow {
	box-shadow: 0 0 20px rgba(19, 236, 91, 0.2);
}

.energy-glow:hover {
	box-shadow: 0 0 25px -5px rgba(19, 236, 91, 0.4);
}

.solar-glow {
	background: radial-gradient(circle at center, rgba(19, 236, 91, 0.15) 0%, rgba(16, 34, 22, 0) 70%);
}

.emerald-glow {
	box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

/* ── Grid patterns ── */
.blueprint-grid {
	background-image: radial-gradient(rgba(19, 236, 91, 0.1) 1px, transparent 1px);
	background-size: 30px 30px;
}

.circuit-pattern {
	background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
	background-size: 32px 32px;
}

/* ── Tech border ── */
.tech-border {
	border-image: linear-gradient(to right, #13ec5b, transparent) 1;
}

/* ── Energy path line ── */
.energy-path-line {
	background: linear-gradient(90deg, transparent 0%, #10b981 50%, transparent 100%);
	height: 2px;
	width: 100%;
}

/* ── Masonry grid ── */
.masonry-grid {
	columns: 1;
	column-gap: 1.5rem;
}

@media (min-width: 768px) {
	.masonry-grid { columns: 2; }
}

@media (min-width: 1024px) {
	.masonry-grid { columns: 3; }
}

.masonry-item {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

/* ── Calculator wrap ── */
.calc-wrap {
	padding: 2.5rem 1.5rem;
	background: #090d09;
	font-family: 'Segoe UI', sans-serif;
	min-height: 100vh;
}

/* ── Type badges ── */
.type-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .75rem;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.badge-res { background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.badge-ind { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

/* ── Comparison table ── */
.compare-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	font-size: .8rem;
}

.compare-row:last-child { border-bottom: none; }

/* ── Modal overlay (calculator) ── */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	z-index: 1000;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	backdrop-filter: blur(4px);
}

.modal-overlay.open { display: flex; }

.modal-box {
	background: #0f170f;
	border: 1px solid rgba(74,222,128,0.2);
	border-radius: 1.2rem;
	width: 100%;
	max-width: 720px;
	max-height: 85vh;
	overflow-y: auto;
	padding: 2rem;
}

/* ── Year rows ── */
.year-row { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; }
.year-bar-bg { flex: 1; height: 8px; background: #1a251a; border-radius: 4px; overflow: hidden; }
.year-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.result-num { transition: all .3s; }

/* ── Range input ── */
input[type=range] {
	width: 100%;
	height: 6px;
	border-radius: 4px;
	appearance: none;
	cursor: pointer;
	outline: none;
}

input[type=range]::-webkit-slider-thumb {
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #4ade80;
	cursor: pointer;
	box-shadow: 0 0 8px rgba(74,222,128,0.5);
}

/* ── Calc buttons ── */
.btn-type { padding: .6rem 1rem; border-radius: .5rem; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s; border: 1.5px solid; }
.btn-active-res { border-color: #4ade80; background: rgba(74,222,128,0.1); color: #4ade80; }
.btn-inactive { border-color: rgba(255,255,255,0.1); background: transparent; color: #666; }
.btn-active-ind { border-color: #fbbf24; background: rgba(251,191,36,0.1); color: #fbbf24; }

/* ── Diff pills ── */
.diff-pill { font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.diff-plus { background: rgba(74,222,128,0.15); color: #4ade80; }
.diff-minus { background: rgba(239,68,68,0.15); color: #ef4444; }
.diff-yellow { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* ── Quote modal (wizard) ── */
.modal-wrap {
	min-height: 560px;
	background: rgba(10,12,18,0.88);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	border-radius: 16px;
}

.modal {
	background: #0f1117;
	border: 0.5px solid rgba(255,180,50,0.18);
	border-radius: 20px;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	font-family: 'DM Sans', sans-serif;
}

.modal-header {
	background: linear-gradient(135deg, #1a1206 0%, #0f1117 60%);
	border-bottom: 0.5px solid rgba(255,180,50,0.14);
	padding: 1.5rem 1.75rem 1.25rem;
}

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1.25rem; }
.sun-icon { width: 32px; height: 32px; }
.brand-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; color: #f5c842; letter-spacing: 0.04em; }
.brand-sub { font-size: 11px; color: rgba(245,200,66,0.5); letter-spacing: 0.08em; text-transform: uppercase; }

.steps-track { display: flex; align-items: center; gap: 0; }
.step-item { display: flex; align-items: center; flex: 1; }

.step-circle {
	width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
	transition: all 0.35s ease; flex-shrink: 0;
}

.step-circle.done { background: #f5c842; color: #0f1117; }
.step-circle.active { background: transparent; border: 2px solid #f5c842; color: #f5c842; box-shadow: 0 0 0 4px rgba(245,200,66,0.12); }
.step-circle.idle { background: transparent; border: 1.5px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); }

.step-label { font-size: 10px; font-weight: 500; margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; }
.step-label.active { color: #f5c842; }
.step-label.done { color: rgba(245,200,66,0.65); }
.step-label.idle { color: rgba(255,255,255,0.2); }

.step-connector { flex: 1; height: 1px; margin: 0 6px; transition: background 0.35s; }
.step-connector.done { background: #f5c842; }
.step-connector.idle { background: rgba(255,255,255,0.1); }
.step-info { display: flex; flex-direction: column; align-items: center; }

.modal-body { padding: 1.75rem; min-height: 280px; }
.step-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.step-desc { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 1.5rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 11px; font-weight: 500; color: rgba(245,200,66,0.75); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 5px; }
.field input, .field select, .field textarea {
	width: 100%; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.1);
	border-radius: 10px; padding: 10px 13px; font-size: 14px; color: #fff;
	font-family: 'DM Sans', sans-serif; outline: none;
	transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none;
}
.field input:focus, .field select:focus { border-color: rgba(245,200,66,0.5); box-shadow: 0 0 0 3px rgba(245,200,66,0.08); }
.field input::placeholder { color: rgba(255,255,255,0.2); }
.field select option { background: #1a1a2e; color: #fff; }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.service-card {
	border: 0.5px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 10px;
	text-align: center; cursor: pointer; transition: all 0.2s; background: rgba(255,255,255,0.03);
}
.service-card:hover { border-color: rgba(245,200,66,0.3); background: rgba(245,200,66,0.05); }
.service-card.selected { border-color: #f5c842; background: rgba(245,200,66,0.1); }
.service-icon { font-size: 22px; margin-bottom: 6px; }
.service-name { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.03em; }
.service-card.selected .service-name { color: #f5c842; }

.confirm-box { background: rgba(245,200,66,0.06); border: 0.5px solid rgba(245,200,66,0.2); border-radius: 14px; padding: 1.25rem; margin-bottom: 1rem; }
.confirm-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.confirm-row:last-child { border-bottom: none; }
.confirm-key { font-size: 12px; color: rgba(255,255,255,0.4); }
.confirm-val { font-size: 13px; font-weight: 500; color: #fff; }

.modal-footer { padding: 1.25rem 1.75rem; border-top: 0.5px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; align-items: center; }

.btn { border-radius: 10px; padding: 10px 22px; font-size: 14px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; transition: all 0.2s; }
.btn-back { background: transparent; border: 0.5px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }
.btn-back:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
.btn-next { background: #f5c842; color: #0f1117; font-weight: 700; padding: 10px 28px; }
.btn-next:hover { background: #ffd445; transform: translateY(-1px); }
.btn-submit { background: #f5c842; color: #0f1117; font-weight: 700; padding: 10px 28px; }
.btn-submit:hover { background: #ffd445; }

.success-screen { text-align: center; padding: 2.5rem 1.75rem; }
.success-icon { width: 64px; height: 64px; background: rgba(245,200,66,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }

.fade-enter { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

/* ── Request modal overlay ── */
#request-modal {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	background: rgba(0,0,0,0);
	backdrop-filter: blur(0px);
	pointer-events: none;
	transition: background 0.35s ease, backdrop-filter 0.35s ease;
}

#request-modal.open {
	background: rgba(0,0,0,0.72);
	backdrop-filter: blur(6px);
	pointer-events: all;
}

/* ── Dialog box ── */
#modal-dialog {
	position: relative;
	width: 100%; max-width: 560px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--panel);
	border: 1.5px solid var(--border);
	border-radius: 20px;
	padding: 36px 32px 28px;
	opacity: 0;
	transform: translateY(24px) scale(0.97);
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
	scrollbar-width: thin;
	scrollbar-color: var(--border) transparent;
}

#request-modal.open #modal-dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ── Amber top accent ── */
#modal-dialog::before {
	content: '';
	position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
	background: linear-gradient(90deg, transparent, var(--primary), transparent);
	border-radius: 0 0 4px 4px;
}

/* ── Close button ── */
#modal-close {
	position: absolute; top: 16px; right: 16px;
	width: 32px; height: 32px; border-radius: 50%;
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--border);
	color: var(--muted);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: all 0.2s;
	font-size: 18px; line-height: 1;
}

#modal-close:hover {
	background: rgba(255,255,255,0.1);
	color: #fff; border-color: #5A5A60;
	transform: rotate(90deg);
}

/* ── Step dots ── */
#request-modal .step-dot {
	width: 34px; height: 34px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: 0.8rem;
	border: 2px solid var(--border);
	background: var(--panel);
	color: var(--muted);
	transition: all 0.4s ease;
	position: relative; z-index: 1;
}

#request-modal .step-dot.active {
	border-color: var(--primary); color: var(--primary);
	box-shadow: 0 0 0 4px rgba(245,158,11,0.15);
}

#request-modal .step-dot.done {
	border-color: var(--primary); background: var(--primary); color: #000;
}

#request-modal .step-line {
	position: absolute; top: 50%; height: 2px;
	background: var(--border); transform: translateY(-50%);
	transition: background 0.5s ease;
}

#request-modal .step-line.active { background: var(--primary-dark); }

/* ── Type cards ── */
#request-modal .type-card {
	border: 2px solid var(--border);
	background: var(--panel-inner);
	border-radius: 12px; cursor: pointer;
	transition: all 0.25s ease;
	position: relative; overflow: hidden;
}
#request-modal .type-card::before {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(245,158,11,0.07) 0%, transparent 60%);
	opacity: 0; transition: opacity 0.3s;
}
#request-modal .type-card:hover { border-color: #5A5A60; transform: translateY(-2px); }
#request-modal .type-card.selected {
	border-color: var(--primary);
	box-shadow: 0 0 0 1px var(--primary), 0 8px 24px rgba(11, 245, 23, 0.12);
}


/* ── Inputs ── */
#request-modal .form-input {
	width: 100%; padding: 11px 14px;
	background: rgba(255,255,255,0.04);
	border: 1.5px solid var(--border);
	border-radius: 8px;
	color: #E4E4E8; font-size: 0.875rem;
	outline: none; transition: border-color 0.2s, box-shadow 0.2s;
	font-family: 'DM Sans', sans-serif;
}

#request-modal .form-input:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(245,158,11,0.1);
}

#request-modal .form-input::placeholder { color: var(--muted); }
#request-modal .form-input.error { border-color: #EF4444; }

/* ── Modal buttons ── */
#request-modal .btn-primary {
	background: var(--primary); color: #000;
	font-weight: 700; border-radius: 8px;
	padding: 11px 24px; cursor: pointer;
	transition: all 0.2s ease; border: none;
	font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
}

#request-modal .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
#request-modal .btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

#request-modal .btn-ghost {
	background: transparent; color: var(--muted);
	font-weight: 500; border-radius: 8px;
	padding: 11px 24px; cursor: pointer;
	transition: all 0.2s ease;
	border: 1.5px solid var(--border);
	font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
}

#request-modal .btn-ghost:hover { border-color: #5A5A60; color: #E4E4E8; }

/* ── Step panels ── */
#request-modal .step-panel { display: none; animation: mFadeSlide 0.32s ease forwards; }
#request-modal .step-panel.active { display: block; }

@keyframes mFadeSlide {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Verify rows ── */
#request-modal .verify-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem;
}

#request-modal .verify-row:last-child { border-bottom: none; }
#request-modal .verify-label { color: var(--muted); }
#request-modal .verify-value { color: #E4E4E8; font-weight: 500; }

/* ── Modal badge ── */
#request-modal .type-badge {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 10px; border-radius: 20px;
	background: rgba(245,158,11,0.15);
	color: var(--primary); font-size: 0.7rem; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Progress bar ── */
#modal-progress-track {
	height: 3px; background: var(--border);
	border-radius: 99px; overflow: hidden; margin-top: 20px;
}

#modal-progress-fill {
	height: 100%; background: var(--primary);
	border-radius: 99px;
	transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ── Success screen ── */
#modal-success .check-circle {
	width: 60px; height: 60px; border-radius: 50%;
	background: rgba(245,158,11,0.12);
	border: 1.5px solid rgba(245,158,11,0.3);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 16px;
}

/* ── Display font ── */
/* #request-modal .display-font { font-family: 'Bebas Neue', sans-serif; } */