:root{--navy:#14324f;--teal:#1f8a9e;--ink:#1d2733;--muted:#5b6b7a;--bg:#ffffff;--soft:#f2f6f9;--line:#dbe3ea}
@media (prefers-color-scheme:dark){:root{--ink:#e6edf3;--muted:#a3b1bf;--bg:#0f1720;--soft:#17222d;--line:#2a3846}}
*{box-sizing:border-box}body{margin:0;font:16px/1.65 Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--teal)}img{max-width:100%;height:auto}
header{background:var(--navy);color:#fff}.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px}
.logo img{height:56px;display:block}nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:bold;font-size:15px}
nav a:hover,nav a.on{color:#8fd6e3}
.hero{background:linear-gradient(rgba(20,50,79,.78),rgba(20,50,79,.78)),url(images/banner/shutterstock_338230943.jpg) center/cover;color:#fff;padding:70px 0}
.hero h1{font-size:36px;margin:0 0 10px}.hero p{font-size:19px;max-width:720px;margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:36px 0}
.card{background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:20px}.card h3{margin:0 0 6px;color:var(--teal)}
.card img{border-radius:6px;margin-bottom:10px}
main{padding:30px 0 50px}main h1{color:var(--teal);margin-top:0}
.float-right{float:right;margin:0 0 14px 20px;max-width:45%}.float-left{float:left;margin:0 20px 14px 0;max-width:45%}.block{display:block;margin:14px 0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:16px 0;clear:both}
.gallery img{border:1px solid var(--line);border-radius:6px;display:block}
.modnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}.modnav a{padding:6px 12px;border:1px solid var(--line);border-radius:20px;text-decoration:none;font-size:14px}
.modnav a.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.cta{background:var(--soft);border-left:4px solid var(--teal);padding:16px 20px;margin:26px 0;clear:both}
footer{background:var(--navy);color:#cfe0ec;font-size:14px;padding:22px 0}footer a{color:#fff}
.clear{clear:both}
@media (max-width:700px){nav a{margin:0 14px 0 0}.float-right,.float-left{float:none;max-width:100%;margin:12px 0}.hero h1{font-size:28px}}