:root{--primary:#0e3b63;--accent:#2fb6d9;--light:#f4f8fb;--text:#243447}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);line-height:1.6}
.hero{position:relative;min-height:90vh;display:flex;align-items:center;background:url('../images/hero-bridge.jpg') center/cover no-repeat}
.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,30,50,.72),rgba(10,30,50,.25))}
.hero-content{position:relative;max-width:640px;padding:2rem;margin-left:5vw;color:white}
.domain{font-size:1.1rem}h1{font-size:clamp(2.5rem,6vw,4.5rem);line-height:1.1}
.intro{font-size:1.2rem}.button{display:inline-block;background:var(--accent);color:#fff;padding:1rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:bold}
.statement{text-align:center;padding:4rem 1.5rem;background:var(--primary);color:white}
blockquote{font-size:clamp(1.4rem,3vw,2rem);font-style:italic;max-width:800px;margin:auto}
.content{padding:4rem 1.5rem;max-width:1100px;margin:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.card{background:var(--light);padding:1.5rem;border-radius:14px}
.alt{background:var(--light);max-width:none}.alt>*{max-width:1100px;margin:auto}
.example{background:white;padding:1rem 1.5rem;border-radius:14px}
footer{padding:2rem;text-align:center;background:#e9eef3}
footer a{color:var(--primary);text-decoration:none}
@media(max-width:768px){.hero{min-height:75vh}.hero-content{margin-left:0;padding:1.5rem}}