:root { --teal:#00BFA6; --navy:#1A3E59; --gray:#F5F7FA; --text:#1F2937; }
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--gray)}
a{color:var(--teal);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
nav.nav{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:40}
.nav .inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .brand{display:flex;align-items:center;gap:10px}
.nav .brand img{height:28px;width:auto;display:block}
.nav .links a{color:var(--text);font-weight:600;margin-left:18px;opacity:.9}
.nav .links a:hover{color:var(--navy)}
header.hero{background:linear-gradient(135deg,var(--navy),#0f2b3f);color:#fff;padding:96px 0 72px;text-align:center}
.hero .brand {display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.brand-logo{width:44px;height:44px;border-radius:10px;background:var(--teal);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.hero h1{margin:10px 0 8px;font-size:44px}
.hero .tagline{margin:8px 0 22px;font-size:18px;opacity:.95}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:12px 18px;border-radius:10px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.btn:hover{transform:translateY(-1px);transition:.15s ease}
.btn.btn-outline{background:transparent;border:2px solid #fff;margin-left:10px}
.section{padding:64px 0}
.section h2{margin:0 0 8px;color:var(--navy);font-size:28px}
.muted{color:#6b7280}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid #eef2f7}
.card h3{margin:6px 0 6px}
.card p{margin:0;line-height:1.55}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.portfolio-grid img{width:100%;border-radius:12px;border:1px solid #e5e7eb}
.contact form{background:#fff;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid #eef2f7}
label{display:block;font-weight:600;margin:6px 0 6px}
input,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #d1d5db;background:#fff}
button.cta{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer}
button.cta:hover{filter:brightness(.95)}
footer{padding:28px 0 40px;text-align:center;color:#6b7280}
footer .links{margin-top:8px}
footer .links a{margin:0 8px;font-size:14px;color:#6b7280}
footer .links a:hover{color:var(--navy)}