:where([class^="ri-"])::before { content: "\f3c2"; }
html, body { width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
* { font-family: 'IBM Plex Mono', monospace; }

/* Index page */
.typing-animation { overflow: hidden; border-right: 2px solid #ff6b35; white-space: nowrap; animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: #ff6b35; } }
.parallax { transform: translateY(var(--scroll-y, 0)); }
.smooth-scroll { scroll-behavior: smooth; }
.gradient-overlay { background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); }
.video-overlay { background: linear-gradient(45deg, rgba(0, 0, 0, 0.6), rgba(26, 26, 26, 0.4)); }
.aspect-ratio { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.aspect-ratio iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.aspect-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Quote page */
.step-indicator { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.step-indicator::before { content: ''; position: absolute; top: 1.25rem; left: 0; right: 0; height: 2px; background: #374151; z-index: 1; }
.step-indicator .step { position: relative; z-index: 2; }
.step.active .step-circle { background: #ff6b35; color: white; }
.step.completed .step-circle { background: #10b981; color: white; }
.step-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #374151; color: #9ca3af; display: flex; align-items: center; justify-content: center; font-weight: 600; transition: all 0.3s ease; }
.form-section { display: none; }
.form-section.active { display: block; }
.custom-checkbox { position: relative; display: inline-block; width: 1.25rem; height: 1.25rem; }
.custom-checkbox input { opacity: 0; position: absolute; }
.custom-checkbox .checkmark { position: absolute; top: 0; left: 0; height: 1.25rem; width: 1.25rem; background: #374151; border: 2px solid #4b5563; border-radius: 4px; transition: all 0.3s ease; }
.custom-checkbox input:checked ~ .checkmark { background: #ff6b35; border-color: #ff6b35; }
.custom-checkbox .checkmark::after { content: ''; position: absolute; display: none; left: 4px; top: 1px; width: 6px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.custom-checkbox input:checked ~ .checkmark::after { display: block; }
.custom-radio { position: relative; display: inline-block; width: 1.25rem; height: 1.25rem; }
.custom-radio input { opacity: 0; position: absolute; }
.custom-radio .radiomark { position: absolute; top: 0; left: 0; height: 1.25rem; width: 1.25rem; background: #374151; border: 2px solid #4b5563; border-radius: 50%; transition: all 0.3s ease; }
.custom-radio input:checked ~ .radiomark { background: #ff6b35; border-color: #ff6b35; }
.custom-radio .radiomark::after { content: ''; position: absolute; display: none; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: white; }
.custom-radio input:checked ~ .radiomark::after { display: block; }
.file-upload { position: relative; display: inline-block; cursor: pointer; }
.file-upload input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.progress-bar { background: linear-gradient(90deg, #ff6b35 var(--progress, 0%), #374151 var(--progress, 0%)); }

@media (max-width: 640px) {
	.step-indicator {
		display: flex;
		gap: 0.75rem;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 0.25rem 0.5rem;
		scroll-snap-type: x proximity;
	}
	.step-indicator::before {
		display: block;
		top: 1.125rem;
		left: 0.25rem;
		right: 0.25rem;
	}
	.step-indicator .step {
		align-items: center;
		min-width: 5rem;
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
	.step-indicator .step-circle {
		width: 2.25rem;
		height: 2.25rem;
	}
	.step-indicator .step span {
		font-size: 0.7rem;
		line-height: 1.2;
		max-width: 5rem;
	}
}