:root{--navy:#101a33;--navy2:#1b2a4d;--frost:#5fb4e6;--gold:#d9a441;--crimson:#8c2230;--bg:#f3f5f9;--card:#fff;--text:#2a3350;
  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.65 "Segoe UI","Helvetica Neue",system-ui,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Palatino,"Palatino Linotype",Georgia,serif;color:var(--navy);line-height:1.2;margin:0 0 .6em}
h1{font-size:2.1rem}h2{font-size:1.6rem}h3{font-size:1.1rem}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;background:var(--navy);padding:10px 26px;justify-content: center;}
.topp{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;background:var(--navy);padding:10px 26px;border-bottom:2px solid var(--gold);justify-content: center;}
.brand{color:var(--gold);font-family:Palatino,Georgia,serif;font-weight:700;font-size:1.15rem;text-decoration:none;flex:none}
.top nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.top nav a{color:#c9d3e0;text-decoration:none;padding:8px 10px;white-space:nowrap;border-radius:6px;font-size:.92rem}
.top nav a:hover,.top nav a.on{color:#fff;background:var(--navy2)}

.hero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#c9d3e0;padding:56px 20px 64px;text-align:center;margin:0 auto;}
.hero h1{color:#fff;max-width:60ch;margin:0 auto;}
.hero p{max-width:60ch;margin:0 0 26px;text-align:center;margin:10px auto;}
.btn{display:inline-block;background:var(--gold);color:var(--navy);border:0;border-radius:6px;padding:12px 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:#e8b857}
:focus-visible{outline:3px solid var(--frost);outline-offset:2px}

.section{padding:44px 20px;max-width:1100px;margin:0 auto}
.tint{max-width:none;background:#e4e9f2}
.tint>*{max-width:1100px;margin-left:auto;margin-right:auto}
.sub{margin-top:40px}

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

.banner{min-height:240px;display:flex;align-items:center;padding:36px 20px;color:#fff;background:var(--navy) 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:var(--gold);font-weight:700}
.b1{background-image:url(../images/banner-1.svg)}
.b2{background-image:url(../images/banner-2.svg)}

.profiles{display:grid;gap:16px}
.profiles article{background:var(--card);border-left:4px solid var(--gold);border-radius:8px;padding:20px}
.profiles p,.news p{margin:0}

.news{display:grid;grid-template-columns:1fr;gap:18px}
.news article{background:var(--card);border-top:3px solid var(--frost);border-radius:8px;padding:20px}
.news p{font-size:.95rem}

.foot{background:var(--navy);color:#c9d3e0;max-width:none}
.foot h2{color:var(--gold)}
.foot>*{max-width:1100px;margin-left:auto;margin-right:auto}
.small{font-size:.8rem;opacity:.7}

@media(min-width:700px){
  h1{font-size:3rem}h2{font-size:1.9rem}
  .products{grid-template-columns:repeat(4,1fr);gap:16px}
  .profiles{grid-template-columns:repeat(2,1fr)}
  .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:#0b1226;--card:#141f3b;--text:#c9d3e0}
  h1,h2,h3,.products figcaption{color:#fff}
  .tint{background:#0f1830}
  .products figure{border-color:#26345a}
}