:root {
	--page-max-width: 1100px;
	--space-xl: 64px;
	--space-lg: 32px;
	--space-md: 20px;
	--space-sm: 12px;

	--color-bg: #ffffff;
	--color-muted: #6b7280;
	--color-primary: #2563eb;
	--color-primary-600: #1d4ed8;
	--color-accent: #06b6d4;
	--color-border: #e5e7eb;
	--color-card: #f8fafc;
	--color-text: #0f172a;
}

/* Reset & base */
* { box-sizing: border-box; }
html,body{height:100%;}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color:var(--color-text);
	background:var(--color-bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.5;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Layout container */
.container{
	width:calc(100% - 40px);
	max-width:var(--page-max-width);
	margin:0 auto;
	padding:0 20px;
}

/* Header / Nav */
header{background:transparent}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;color:var(--color-text)}
.menu a{margin-left:20px;color:var(--color-muted);font-weight:600}
.menu a:hover{color:var(--color-text)}

/* Hero */
.hero{padding:calc(var(--space-lg) + 8px) 8% 48px;background:linear-gradient(180deg, rgba(37,99,235,0.05), transparent)}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}
.hero p{max-width:760px;color:var(--color-muted);margin:0}

/* Services preview */
.services-preview, .about, .services{padding:56px 8%}
.services-preview h2,.about h1,.services h2{margin-top:0}

/* Services grid & cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:var(--color-card);border:1px solid var(--color-border);padding:20px;border-radius:10px}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--color-muted)}

/* Call to action */
.cta{padding:48px 8%;text-align:center}
.cta h2{margin:0 0 18px}
.cta button{background:var(--color-primary);color:#fff;border:none;padding:14px 22px;border-radius:8px;cursor:pointer;font-weight:700}
.cta button:hover{background:var(--color-primary-600)}

/* Contact form (some pages include inline styles; this ensures consistent look) */
.contact-section{padding:80px 8%;max-width:900px;margin:0 auto}
.contact-form input,.contact-form textarea{background:#fff;border:1px solid var(--color-border);Padding:12px;border-radius:8px}
.contact-form button{background:var(--color-primary);color:#fff;border:none;padding:12px;border-radius:8px;cursor:pointer}

/* Footer */
footer{padding:28px 8%;border-top:1px solid var(--color-border);text-align:center;color:var(--color-muted);font-size:14px}

/* Utilities */
.text-center{text-align:center}
.muted{color:var(--color-muted)}

/* Fade-in helpers used in HTML */
.fade{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.fade.visible{opacity:1;transform:none}

/* Responsive */
@media (max-width: 900px){
	.grid{grid-template-columns:1fr}
	.menu a{margin-left:12px}
	.hero{padding:48px 6%}
}

@media (max-width: 520px){
	.menu{display:none}
	nav{padding:12px 0}
	.hero{padding:36px 5%}
	.contact-section{padding:40px 6%}
}

/* Small helpers for accessibility and focus */
:focus{outline:2px solid var(--color-accent);outline-offset:2px}

/* Simple print styles */
@media print{body{color:#000;background:#fff}nav,footer,.cta{display:none}}

/* End of stylesheet */