:root{--slate:#2b363f;--slate2:#3a4752;--accent:#226e93;--link:#006580;--ink:#212121;--muted:#5f6b74;--line:#dfe3e6}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Lato,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{color:var(--link)}img{max-width:100%;display:block}
.testbar{background:#f6c343;color:#3b2f00;text-align:center;font-size:13px;padding:6px 12px;font-weight:700}
.nav{background:var(--slate);position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;max-width:1200px;margin:0 auto}
.brand{color:#fff;text-decoration:none;font-weight:300;font-size:20px;letter-spacing:.3px}
.nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{color:#dfe6ea;text-decoration:none;font-size:15px;padding:6px 12px;border-radius:4px}
.nav ul a:hover{background:rgba(255,255,255,.08)}.nav ul a.active{color:#fff;box-shadow:inset 0 -2px 0 #8fc3dc}
.hero{position:relative;color:#fff;background:linear-gradient(115deg,#26313a 0%,#36434e 45%,#2a353e 46%,#33404a 75%,#28333c 76%)}
.hero .wrap{max-width:1200px;margin:0 auto;padding:56px 24px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{margin:0;font-weight:700;font-size:clamp(40px,6vw,76px);line-height:1.08;text-align:center}
.hero .sub{display:block;font-weight:300;font-size:clamp(30px,4.6vw,60px);margin-top:10px;text-align:center}
.slider{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.slider img.on{opacity:1}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:#c9d1d6;padding:0;cursor:pointer}.dots button.on{background:#4a90b8}
.page-hero{background:var(--slate);color:#fff;padding:48px 24px;text-align:center}
.page-hero h1{margin:0;font-size:clamp(32px,5vw,52px);font-weight:700}.page-hero p{margin:8px 0 0;font-weight:300;font-size:20px;color:#dfe6ea}
main{max-width:1000px;margin:0 auto;padding:24px}
.cta{display:block;max-width:420px;margin:12px auto 24px;background:var(--accent);color:#fff;text-align:center;text-decoration:none;padding:10px 16px;border-radius:4px;font-size:15px}
.cta:hover{background:#1b5a78}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
h2{color:var(--accent);text-align:center;font-size:26px;margin:28px 0 14px}
.social{display:flex;justify-content:center;gap:14px}.social img{width:40px;height:40px}
.social-links{text-align:center;font-size:18px;margin:14px 0 28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:24px 0}
.card{border:1px solid var(--line);border-radius:8px;padding:22px;background:#fafbfc}
.card h3{margin:0 0 6px;color:var(--slate)}.card p{margin:0 0 12px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:24px 0}
.gallery figure{margin:0;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:8px 12px;font-size:14px;color:var(--muted)}
.placeholder{border:2px dashed #c9d1d6;border-radius:8px;padding:18px;color:var(--muted);text-align:center;background:#fbfbfb}
form.demo{display:grid;gap:12px;max-width:520px;margin:0 auto}
form.demo input,form.demo textarea{font:inherit;padding:10px;border:1px solid #c9d1d6;border-radius:4px}
form.demo button{font:inherit;background:#9aa7b0;color:#fff;border:0;padding:10px;border-radius:4px;cursor:not-allowed}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;text-align:center;padding:24px}
@media(max-width:800px){.hero .wrap{grid-template-columns:1fr;padding:36px 20px}.nav .wrap{flex-direction:column}}