:root {
	--blue: #2563eb;
	--blue-light: #eff6ff;
	--blue-glow: rgba(37,99,235,.12);
	--ink: #111827;
	--muted: #6b7280;
	--border: #e5e7eb;
	--surface: #f9fafb;
	--white: #ffffff;
	--ff-head: 'DM Serif Display', Georgia, serif;
	--ff-body: 'DM Sans', sans-serif;
}

html {
	scroll-behavior: smooth;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	font-family: var(--ff-body);
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-head);
}

/* NAV */
.navbar {
	background: var(--white);
	border-bottom: 1px solid var(--border);
	padding: 1rem 0;
}

.navbar-brand {
	font-family: var(--ff-body);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--ink) !important;
	display: flex;
	align-items: center;
	gap: .6rem;
}

.navbar-brand img {
	height: 36px;
	border-radius: 6px;
	object-fit: contain;
}

.nav-link {
	font-size: .9rem;
	font-weight: 500;
	color: var(--muted) !important;
	padding: .4rem .8rem !important;
	border-radius: 6px;
	transition: color .15s, background .15s;
}

.nav-link:hover {
	color: var(--ink) !important;
	background: var(--surface);
}

.btn-nav {
	background: var(--blue);
	color: var(--white) !important;
	border-radius: 8px;
	padding: .45rem 1.1rem !important;
	font-size: .88rem;
	font-weight: 600;
	transition: background .15s;
	text-align: center;
}

.btn-nav:hover {
	background: #1d4ed8;
}

/* HERO */
.hero {
	background: var(--surface);
	padding: 80px 0 72px;
	border-bottom: 1px solid var(--border);
}

.hero-label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: .75rem;
	font-family: var(--ff-body);
}

.hero h1 {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	color: var(--ink);
	line-height: 1.15;
	margin-bottom: 1rem;
	font-weight: 400;
}

.hero-sub {
	font-size: 1.05rem;
	color: var(--muted);
	max-width: 520px;
	line-height: 1.75;
	margin-bottom: 2rem;
}

.hero-btns {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.btn-primary {
	background: var(--blue) !important;
	color: var(--white) !important;
	border: none !important;
	border-radius: 8px;
	padding: .75rem 1.5rem;
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	transition: background .15s;
}

.btn-primary:hover {
	background: #1d4ed8 !important;
}

.btn-secondary {
	background: var(--white);
	color: var(--ink);
	border: 1.5px solid var(--border);
	border-radius: 8px;
	padding: .75rem 1.5rem;
	font-family: var(--ff-body);
	font-weight: 500;
	font-size: .9rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	transition: border-color .15s, color .15s;
}

.btn-secondary:hover {
	border-color: var(--blue);
	color: var(--blue);
}

/* stats */
.hero-stats {
	display: flex;
	gap: 2.5rem;
	flex-wrap: wrap;
}

.stat-num {
	font-family: var(--ff-head);
	font-size: 1.9rem;
	color: var(--ink);
	line-height: 1;
}

.stat-lbl {
	font-size: .78rem;
	font-weight: 500;
	color: var(--muted);
	margin-top: .2rem;
}

/* hero image */
.hero-img {
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
	aspect-ratio: 4/3;
	display: block;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* SECTION */
.sec-pad {
	padding: 72px 0;
}

.sec-label {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: .5rem;
	font-family: var(--ff-body);
}

.sec-title {
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	color: var(--ink);
	line-height: 1.2;
	font-weight: 400;
}

.sec-body {
	font-size: .98rem;
	color: var(--muted);
	max-width: 540px;
	line-height: 1.75;
}

/* SERVICES */
.svc-section {
	background: var(--white);
}

.svc-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.5rem;
	height: 100%;
	transition: border-color .2s, box-shadow .2s;
}

.svc-card:hover {
	border-color: var(--blue);
	box-shadow: 0 4px 20px var(--blue-glow);
}

.svc-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--blue-light);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	margin-bottom: .9rem;
	transition: background .2s, color .2s;
}

.svc-card:hover .svc-icon {
	background: var(--blue);
	color: var(--white);
}

.svc-card h5 {
	font-family: var(--ff-body);
	font-size: .98rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: .35rem;
}

.svc-card p {
	font-size: .86rem;
	color: var(--muted);
	margin: 0;
	line-height: 1.65;
}

/* ABOUT */
.about-section {
	background: var(--surface);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.about-img {
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
	aspect-ratio: 4/3;
	display: block;
}

.feat-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 2rem;
}

.feat-list li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .65rem 0;
	border-bottom: 1px solid var(--border);
}

.feat-list li:last-child {
	border-bottom: none;
}

.feat-check {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 50%;
	background: var(--blue-light);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .6rem;
	margin-top: .15rem;
}

.feat-list h6 {
	font-family: var(--ff-body);
	font-size: .9rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: .1rem;
}

.feat-list p {
	font-size: .82rem;
	color: var(--muted);
	margin: 0;
}

.btn-dark {
	background: var(--ink);
	color: var(--white);
	border: none;
	border-radius: 8px;
	padding: .75rem 1.5rem;
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: background .15s;
}

.btn-dark:hover {
	background: #1f2937;
	color: var(--white);
}

/* TESTIMONIALS */
.testi-section {
	background: var(--white);
}

.testi-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.5rem;
	height: 100%;
	transition: border-color .2s;
}

.testi-card:hover {
	border-color: var(--blue);
}

.testi-stars {
	color: #f59e0b;
	font-size: .8rem;
	margin-bottom: .75rem;
}

.testi-text {
	font-size: .9rem;
	color: var(--ink);
	line-height: 1.75;
	margin-bottom: 1.2rem;
}

.testi-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--blue-light);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
}

.testi-name {
	font-family: var(--ff-body);
	font-size: .9rem;
	font-weight: 700;
	color: var(--ink);
}

.testi-role {
	font-size: .78rem;
	color: var(--muted);
}

/* CONTACT */
.contact-section {
	background: var(--surface);
	border-top: 1px solid var(--border);
}

.contact-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 2rem;
}

.contact-card h4 {
	font-family: var(--ff-body);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 1.4rem;
}

.form-label {
	font-size: .78rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: .35rem;
}

.form-control, .form-select {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: .65rem .9rem;
	font-family: var(--ff-body);
	font-size: .9rem;
	color: var(--ink);
	background: var(--white);
	transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px var(--blue-glow);
	outline: none;
}

.form-control::placeholder {
	color: #9ca3af;
}

textarea.form-control {
	resize: vertical;
	min-height: 130px;
}

.btn-submit {
	background: var(--blue);
	color: var(--white);
	border: none;
	border-radius: 8px;
	padding: .75rem 1.6rem;
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	transition: background .15s;
}

.btn-submit:hover {
	background: #1d4ed8;
}

.ci-row {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--border);
}

.ci-row:last-of-type {
	border-bottom: none;
}

.ci-ico {
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 8px;
	background: var(--blue-light);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
}

.ci-lbl {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	margin-bottom: .15rem;
}

.ci-val {
	font-size: .88rem;
	color: var(--ink);
	margin: 0;
	line-height: 1.6;
}

.contact-photo {
	width: 100%;
	border-radius: 10px;
	object-fit: cover;
	aspect-ratio: 16/9;
	display: block;
	margin-top: auto;
}

/* FOOTER */
footer {
	background: var(--ink);
	padding: 1.5rem 0;
}

.footer-copy {
	font-size: .82rem;
	color: rgba(255,255,255,.4);
}

.footer-copy a {
	color: rgba(255,255,255,.55);
	text-decoration: none;
}

.footer-copy a:hover {
	color: var(--white);
}

.footer-social {
	display: flex;
	gap: .4rem;
}

.footer-social a {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: rgba(255,255,255,.08);
	color: rgba(255,255,255,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .78rem;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.footer-social a:hover {
	background: var(--blue);
	color: var(--white);
}

@media (max-width: 767.98px) {
.hero {
	padding: 56px 0 48px;
}

.hero h1 {
	font-size: 2.2rem;
}

.hero-stats {
	gap: 1.5rem;
}

.sec-pad {
	padding: 56px 0;
}
}