:root{
–bg:#ffffff;
–bg-soft:#f7f9fc;
–card:#ffffff;
–text:#111827;
–muted:#4b5563;
–primary:#1d4ed8;
–primary-2:#0ea5e9;
–accent:#0f766e;
–border:#e5e7eb;
–shadow:0 10px 30px rgba(2, 8, 23, 0.08);
–radius:16px;
–max:1100px;
}

*{box-sizing:border-box}
html,body{
margin:0;
padding:0;
font-family: “Inter”, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
background:var(–bg);
color:var(–text);
line-height:1.6;
scroll-behavior:smooth;
}

.container{
width:min(var(–max), 92%);
margin-inline:auto;
}

/* Header */
header{
position:sticky;
top:0;
z-index:999;
background:rgba(255,255,255,.92);
backdrop-filter: blur(8px);
border-bottom:1px solid var(–border);
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 0;
gap:16px;
}

.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:var(–text);
}

.logo{
width:36px;
height:36px;
border-radius:10px;
background:linear-gradient(135deg, var(–primary), var(–primary-2));
display:grid;
place-items:center;
font-weight:800;
color:white;
box-shadow:0 8px 20px rgba(29,78,216,.25);
}

.brand span{
font-weight:800;
letter-spacing:.3px;
font-size:1.03rem;
}

nav ul{
list-style:none;
display:flex;
gap:18px;
margin:0;
padding:0;
flex-wrap:wrap;
}

nav a{
color:#334155;
text-decoration:none;
font-weight:600;
font-size:.94rem;
transition:.2s ease;
}

nav a:hover{color:var(–primary)}

/* Hero */
.hero{
padding:76px 0 50px;
background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border-bottom:1px solid var(–border);
}

.hero-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:22px;
align-items:stretch;
}

.hero-card{
background:var(–card);
border:1px solid var(–border);
border-radius:var(–radius);
box-shadow:var(–shadow);
padding:32px;
}

.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:.8rem;
letter-spacing:.35px;
text-transform:uppercase;
color:var(–accent);
font-weight:700;
background:#ecfeff;
border:1px solid #cffafe;
border-radius:999px;
padding:6px 12px;
margin-bottom:16px;
}

h1{
font-size:clamp(1.75rem, 4vw, 2.8rem);
line-height:1.15;
margin:0 0 14px;
letter-spacing:.2px;
}

.lead{
color:var(–muted);
font-size:1.03rem;
margin-bottom:22px;
}

.cta-row{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn{
border:none;
border-radius:10px;
padding:11px 16px;
font-weight:700;
letter-spacing:.2px;
cursor:pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:8px;
transition:.2s ease;
font-size:.95rem;
}

.btn-primary{
color:white;
background:linear-gradient(135deg, var(–primary), var(–primary-2));
box-shadow:0 8px 18px rgba(29,78,216,.22);
}

.btn-primary:hover{transform:translateY(-1px)}

.btn-ghost{
color:var(–text);
background:#fff;
border:1px solid var(–border);
}

.btn-ghost:hover{background:#f9fafb}

.stat-card{
background:var(–card);
border:1px solid var(–border);
border-radius:var(–radius);
box-shadow:var(–shadow);
padding:22px;
display:grid;
gap:12px;
align-content:start;
}

.stat{
padding:12px 14px;
border:1px solid var(–border);
border-radius:12px;
background:#fbfdff;
}

.stat b{
display:block;
font-size:1rem;
margin-bottom:4px;
color:#0f172a;
}

.stat span{
color:var(–muted);
font-size:.92rem;
}

/* Sections */
section{ padding:42px 0; }

.section-title{
font-size:clamp(1.35rem, 2.5vw, 2rem);
margin:0 0 14px;
line-height:1.2;
}

.section-sub{
color:var(–muted);
margin:0 0 20px;
max-width:860px;
}

.content-card{
border:1px solid var(–border);
border-radius:var(–radius);
background:#fff;
padding:24px;
box-shadow:var(–shadow);
}

.content-card p{ margin:0 0 12px; }
.content-card p:last-child{ margin-bottom:0; }

/* Services */
.services-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:14px;
}

.service{
border:1px solid var(–border);
background:#fff;
border-radius:14px;
padding:18px;
transition:.2s ease;
box-shadow:0 4px 14px rgba(2,8,23,.04);
}

.service:hover{
transform:translateY(-2px);
border-color:#bfdbfe;
box-shadow:0 10px 20px rgba(2,8,23,.08);
}

.service h3{
margin:0 0 8px;
font-size:1.05rem;
color:#0f172a;
}

.service p{
margin:0;
color:var(–muted);
font-size:.95rem;
}

/* Philosophy + Why */
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.panel{
border:1px solid var(–border);
border-radius:14px;
background:#fff;
padding:20px;
box-shadow:var(–shadow);
}

.panel h3{
margin:0 0 10px;
color:#0f172a;
}

.panel p{
margin:0;
color:var(–muted);
}

.why-list{
margin:8px 0 0;
padding-left:18px;
color:var(–muted);
}

.why-list li{ margin:8px 0; }

/* Footer */
footer{
margin-top:14px;
border-top:1px solid var(–border);
background:#f8fafc;
}

.footer-wrap{
padding:22px 0 30px;
color:var(–muted);
font-size:.94rem;
display:flex;
flex-direction:column;
gap:6px;
}

.tagline{
color:#0f172a;
font-weight:700;
letter-spacing:.2px;
}

/* Responsive */
@media (max-width: 940px){
.hero-grid{grid-template-columns:1fr}
.services-grid{grid-template-columns:1fr}
.split{grid-template-columns:1fr}
nav ul{gap:12px}
}

@media (max-width: 560px){
.hero{padding-top:58px}
.hero-card,.stat-card,.content-card,.panel{padding:18px}
.nav{padding:10px 0}
nav ul{display:none}
}