:root{--ink:#0e2a2e;--teal:#1d4a50;--brass:#b98a2e;--mist:#eef1f1;--text:#2b3b3e;--bg:#fff;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;font:16px/1.6 "Avenir Next","Segoe UI",system-ui,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);line-height:1.2;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.05rem}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;background:var(--ink);padding:10px 26px;justify-content: center;}
.brand{color:#fff;font-weight:700;font-size:1.1rem;text-decoration:none;flex:none;padding-right:20px;}
.top nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.top nav a{color:#d6e2e2;text-decoration:none;padding:8px 10px;white-space:nowrap;border-radius:6px;font-size:.9rem}
.top nav a:hover,.top nav a.on{color:#fff;background:var(--teal)}

.hero{background:var(--ink);color:#d6e2e2;padding:48px 20px 56px  56px;text-align:center;margin:0 auto;}
.hero h1{color:#fff;max-width:60ch;margin:0 auto;}
.hero p{max-width:60ch;text-align:center;margin:10px auto;}
.btn{display:inline-block;background:var(--brass);color:#fff;border:0;border-radius:8px;padding:12px 22px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:#9f7424}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}

.section{padding:44px 20px;max-width:1100px;margin:0 auto}
.tint{max-width:none;background:var(--mist)}
.tint>*{max-width:1100px;margin-left:auto;margin-right:auto}

.products{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.products figure{margin:0;background:var(--mist);border-radius:10px;overflow:hidden}
.products figcaption{padding:10px 12px;font-weight:600;color:var(--ink);font-size:.95rem}

.banner{min-height:240px;display:flex;align-items:center;padding:36px 20px;color:#fff;background:var(--ink) center/cover no-repeat}
.banner>div{max-width:1100px;width:100%;margin:0 auto}
.banner h2{color:#fff}
.banner p{margin:.2em 0}
.banner a{color:#f3d98b;font-weight:600}
.b1{background-image:url(../images/banner-1.svg)}
.b2{background-image:url(../images/banner-2.svg)}

.stats{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.stats li{border-top:3px solid var(--brass);padding-top:8px;font-size:.85rem}
.stats strong{display:block;font-size:1.4rem;color:var(--ink)}
.more{margin-bottom:16px;padding:14px 16px;border-left:3px solid var(--brass);background:var(--mist)}
.more[hidden]{display:none}

.news{display:grid;grid-template-columns:1fr;gap:20px}
.news article{background:#fff;border-radius:10px;padding:20px}
.news p{margin:0;font-size:.95rem}

.updates{list-style:none;padding:0;margin:0 0 20px}
.updates li{padding:12px 0;border-bottom:1px solid #d9e1e1}
.updates time{display:block;font-weight:600;color:var(--teal);font-size:.85rem}

.foot{background:var(--ink);color:#d6e2e2;max-width:none}
.foot h2{color:#fff}
.foot>*{max-width:1100px;margin-left:auto;margin-right:auto}
.small{font-size:.85rem;opacity:.7}

@media(min-width:700px){
  h1{font-size:2.8rem}h2{font-size:1.8rem}
  .products{grid-template-columns:repeat(4,1fr);gap:16px}
  .news{grid-template-columns:repeat(3,1fr)}
  .banner{min-height:300px;padding:48px 40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(prefers-color-scheme:dark){
  :root{--bg:#0b1b1d;--text:#cdd9d9;--mist:#13292c}
  h1,h2,h3,.products figcaption,.stats strong{color:#fff}
  .news article{background:#0f2528}
  .updates li{border-color:#25403f}
}