/* style.css - DraftingOnly Landing Page */
:root {
	--primary: #1a73e8;
	--secondary: #f5f7fa;
	--accent: #ffb300;
	--dark: #222;
	--light: #fff;
	--border-radius: 8px;
	--transition: 0.3s;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html,
body {
	overflow-x: hidden;
}
body {
	font-family: "Segoe UI", Arial, sans-serif;
	background: var(--secondary);
	color: var(--dark);
	min-height: 100vh;
}
header {
	background: var(--light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	position: sticky;
	top: 0;
	z-index: 100;
}
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 2rem;
}
.logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.logo img {
	width: 40px;
	height: 40px;
}
.logo span {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--primary);
}
.nav-links {
	list-style: none;
	display: flex;
	gap: 2rem;
}
.nav-links a {
	text-decoration: none;
	color: var(--dark);
	font-weight: 500;
	transition: color var(--transition);
}
.nav-links .login-btn {
	background: var(--primary);
	color: var(--light);
	padding: 0.5rem 1.2rem;
	border-radius: var(--border-radius);
	font-weight: bold;
	transition: background var(--transition);
}
.nav-links .login-btn:hover {
	background: var(--accent);
	color: var(--dark);
}
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	width: 100vw;
	position: relative;
	overflow: hidden;
	background: linear-gradient(rgba(26, 115, 232, 0.7), rgba(26, 115, 232, 0.7)),
		url("assets/engineering-drawing.jpg") center center / cover no-repeat fixed,
		url('data:image/svg+xml;utf8,<svg width="90" height="90" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.08"><rect x="10" y="10" width="70" height="70" rx="12" stroke="white" stroke-width="2"/><rect x="20" y="65" width="50" height="6" rx="2" fill="white"/><polygon points="30,30 60,30 45,60" fill="white"/><rect x="65" y="20" width="6" height="30" rx="2" fill="white"/><rect x="25" y="20" width="4" height="30" rx="2" fill="white"/><circle cx="45" cy="45" r="8" stroke="white" stroke-width="2" fill="none"/><rect x="40" y="15" width="10" height="30" rx="2" fill="white" transform="rotate(30 45 30)"/><rect x="60" y="60" width="18" height="4" rx="2" fill="white" transform="rotate(-45 60 60)"/></g></svg>')
			repeat;
	background-blend-mode: overlay;
	color: var(--light);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.hero-content {
	z-index: 3;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}
.hero-content h1 {
	font-size: 2.8rem;
	margin-bottom: 1rem;
}
.hero-content p {
	font-size: 1.3rem;
	margin-bottom: 2rem;
}
.hero-content .hero-sub {
	font-size: 1.4rem;
	margin-bottom: 2.2rem;
	color: #e3eafc;
	font-weight: 400;
}
.hero-cta-group {
	display: flex;
	gap: 1.2rem;
	justify-content: center;
}
.cta-btn {
	background: var(--accent);
	color: var(--dark);
	border: none;
	padding: 0.8rem 2rem;
	border-radius: var(--border-radius);
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition);
}
.cta-btn.secondary {
	background: transparent;
	color: var(--light);
	border: 2px solid var(--accent);
	font-weight: 500;
	transition: background var(--transition), color var(--transition);
}
.cta-btn:hover {
	background: var(--light);
	color: var(--primary);
}
.cta-btn.secondary:hover {
	background: var(--accent);
	color: var(--dark);
}
.hero-img {
	flex: 1 1 300px;
	max-width: 400px;
	width: 100%;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	margin-left: 2rem;
}
.hero-image-extra {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	margin-top: 2rem;
}
.hero-image-extra img {
	max-width: 420px;
	width: 90vw;
	border-radius: var(--border-radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
	object-fit: cover;
	background: #fff;
	opacity: 0.95;
}
.hero-tools-illustration {
	position: absolute;
	z-index: 1;
	opacity: 0.3;
	pointer-events: none;
}
.hero-tools-top-left {
	top: 2vw;
	left: 2vw;
}
.hero-tools-bottom-right {
	bottom: 2vw;
	right: 2vw;
}
.hero-tools-center-left {
	top: 40%;
	left: 0;
	transform: translateY(-50%);
}
.hero-tools-center-right {
	top: 40%;
	right: 0;
	transform: translateY(-50%);
}
@media (max-width: 900px) {
	.navbar {
		flex-direction: column;
		gap: 1rem;
	}
	.hero {
		padding: 2rem 1rem;
		background-attachment: scroll;
	}
	.hero-content {
		padding: 1.5rem 1rem;
	}
	.hero-image-extra img {
		max-width: 95vw;
	}
	.hero-tools-top-left,
	.hero-tools-bottom-right {
		top: 1rem !important;
		left: 1rem !important;
		bottom: 1rem !important;
		right: 1rem !important;
	}
	.hero-tools-illustration {
		opacity: 0.25;
	}
	.hero-tools-top-left,
	.hero-tools-bottom-right,
	.hero-tools-center-left,
	.hero-tools-center-right {
		position: absolute;
		width: 40vw !important;
		height: auto !important;
	}
}
@media (max-width: 600px) {
	.navbar {
		padding: 1rem;
	}
	.hero {
		padding: 2rem 1rem;
	}
	.about {
		padding: 1rem;
	}
	.testimonials-list {
		padding: 0;
	}
	.testimonial {
		padding: 1rem;
	}
}
.about {
	background: var(--light);
	margin: 0 auto;
	max-width: 100vw;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 0;
	box-shadow: none;
	padding: 2rem;
	animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1);
	opacity: 0;
	transform: translateY(60px);
	transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.about.visible {
	opacity: 1;
	transform: translateY(0);
}
.about h2 {
	margin-bottom: 1rem;
}
.about-intro {
	max-width: 600px;
	margin: 0 auto 2.5rem auto;
	text-align: center;
	font-size: 1.2rem;
	color: #234;
}
.about-features {
	margin: 2rem 0 2rem 0;
	padding-left: 1.2rem;
	max-width: 600px;
	text-align: left;
}
.about-features li {
	margin-bottom: 1rem;
	font-size: 1.1rem;
	line-height: 1.6;
	list-style: disc inside;
}
.about-features-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(220px, 1fr));
	gap: 2rem;
	max-width: 1000px;
	margin: 0 auto 2.5rem auto;
	justify-content: center;
	align-items: stretch;
}
.about-feature-card {
	background: var(--light);
	border-radius: var(--border-radius);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 2rem 1.2rem 1.5rem 1.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.2s, box-shadow 0.2s;
	justify-content: center;
	opacity: 0;
	transform: scale(0.85) translateY(60px);
	animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.about-feature-card:hover {
	transform: translateY(-6px) scale(1.03);
	box-shadow: 0 6px 24px rgba(26, 115, 232, 0.1);
}
.about-feature-card:nth-child(1) {
	animation-delay: 0.2s;
}
.about-feature-card:nth-child(2) {
	animation-delay: 0.35s;
}
.about-feature-card:nth-child(3) {
	animation-delay: 0.5s;
}
.about-feature-card:nth-child(4) {
	animation-delay: 0.65s;
}
.about-feature-card:nth-child(5) {
	animation-delay: 0.8s;
}
.about-feature-card:nth-child(6) {
	animation-delay: 0.95s;
}
.about-icon {
	font-size: 2.2rem;
	margin-bottom: 1rem;
	color: var(--primary);
	display: block;
}
.about-feature-card h3 {
	margin-bottom: 0.5rem;
	color: var(--primary);
	font-size: 1.15rem;
}
.about-feature-card p {
	color: #345;
	font-size: 1rem;
}
.about-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}
.about-cta span {
	font-size: 1.15rem;
	color: var(--primary);
	font-weight: 500;
}
.about-cta .cta-btn {
	margin-top: 0.5rem;
}
footer {
	background: var(--dark);
	color: var(--light);
	text-align: center;
	padding: 1.5rem 0 1rem 0;
	margin-top: 2rem;
}
.footer-links a {
	color: var(--light);
	text-decoration: none;
	margin: 0 0.5rem;
	font-size: 0.95rem;
}
.social-icons {
	margin: 1rem 0;
}
.social-icons a img {
	width: 28px;
	height: 28px;
	margin: 0 0.3rem;
	filter: brightness(0) invert(1);
	transition: filter var(--transition);
}
.social-icons a img:hover {
	filter: brightness(0.7) invert(0.7) sepia(1) hue-rotate(180deg);
}
.contact {
	background: var(--secondary);
	margin: 2rem auto;
	max-width: 800px;
	border-radius: var(--border-radius);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	padding: 2rem;
}
.contact h2 {
	margin-bottom: 1rem;
}
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}
.contact-form input,
.contact-form textarea,
.contact-form button {
	padding: 0.7rem;
	border-radius: var(--border-radius);
	border: 1px solid #ccc;
	font-size: 1rem;
}
.contact-form textarea {
	min-height: 100px;
	resize: vertical;
}
.contact-form button {
	background: var(--primary);
	color: var(--light);
	border: none;
	font-weight: bold;
	cursor: pointer;
	transition: background var(--transition);
}
.contact-form button:hover {
	background: var(--accent);
	color: var(--dark);
}
.testimonials-page {
	background: var(--secondary);
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}
.testimonials-page h1 {
	font-size: 2.2rem;
	margin-bottom: 2rem;
	color: var(--primary);
}
.testimonials-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: 700px;
	width: 100%;
}
.testimonial {
	background: var(--light);
	border-radius: var(--border-radius);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 2rem;
	font-size: 1.1rem;
	color: var(--dark);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.testimonial span {
	color: var(--primary);
	font-weight: bold;
	font-size: 1rem;
	align-self: flex-end;
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeScaleUp {
	0% {
		opacity: 0;
		transform: scale(0.85) translateY(60px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}