:root{
  --brand:#50b4a3;
  --text:#191a1a;
  --muted:#4a4a4a;
  --bg:#f6fbfb;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px dotted currentColor; outline-offset:2px}

.brandTopbar{
  position:sticky; top:0; z-index:9999;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brandTopbar__inner{
  max-width:1240px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brandTopbar__logo{
  display:flex; align-items:center; gap:12px;
  min-width:260px;
}
.brandTopbar__logo img{
  width:46px; height:46px; object-fit:contain;
}
.brandTopbar__brandText{
  display:flex; flex-direction:column; line-height:1.05;
}
.brandTopbar__brandText .name{
  font-family:Manrope,Inter,system-ui,sans-serif;
  font-weight:700; font-size:18px;
}
.brandTopbar__brandText .tag{
  font-size:12px; color:var(--muted);
  margin-top:3px;
}

.brandNav{
  flex:1;
  display:flex;
  justify-content:center;
}
.brandNav__list{
  display:flex; gap:22px;
  list-style:none; padding:0; margin:0;
  align-items:center;
  font-size:14px;
}
.brandNav__list a{
  color:var(--muted);
  padding:6px 2px;
}
.brandNav__list a:hover{color:var(--brand)}

.brandTopbar__cta{
  display:flex; align-items:center; gap:10px;
}
.brandBtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:14px;
  border:0;
  box-shadow: 0 10px 18px rgba(80,180,163,.25);
}
.brandBtn:hover{filter:brightness(.98)}
.brandBtn:active{transform:translateY(1px)}

.brandBurger{
  display:none;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.brandBurger span{
  width:18px; height:2px; background:var(--brand); display:block; position:relative;
}
.brandBurger span:before,
.brandBurger span:after{
  content:""; position:absolute; left:0;
  width:18px; height:2px; background:var(--brand);
}
.brandBurger span:before{top:-6px}
.brandBurger span:after{top:6px}

.brandMobilePanel{
  display:none;
  border-top:1px solid rgba(0,0,0,.06);
  background:#fff;
}
.brandMobilePanel__inner{
  max-width:1240px;
  margin:0 auto;
  padding:14px 24px 18px;
}
.brandMobilePanel__list{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.brandMobilePanel__list a{
  color:var(--muted);
  padding:10px 4px;
  border-radius:10px;
}
.brandMobilePanel__list a:hover{background:rgba(80,180,163,.10); color:var(--text)}

.brandPage{
  max-width:1240px;
  margin:0 auto;
  padding:26px 24px 54px;
}

.brandFooter{
  background:var(--brand);
  color:#fff;
  margin-top:48px;
}
.brandFooter__inner{
  max-width:1240px;
  margin:0 auto;
  padding:44px 24px;
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr 1fr;
  gap:26px;
}
.brandFooter h3{
  margin:0 0 12px;
  font-family:Manrope,Inter,system-ui,sans-serif;
  font-size:18px;
}
.brandFooter p, .brandFooter li{color:rgba(255,255,255,.92); font-size:14px; line-height:1.55}
.brandFooter ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.brandFooter a{color:#fff; opacity:.92}
.brandFooter a:hover{opacity:1; text-decoration:underline}
.brandFooter__bottom{
  border-top:1px solid rgba(255,255,255,.25);
  text-align:center;
  padding:14px 24px;
  font-size:13px;
  opacity:.95;
}


@media (max-width: 980px){
  .brandNav{display:none}
  .brandBurger{display:inline-flex}
  .brandTopbar__logo{min-width:auto}
  .brandFooter__inner{grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .brandTopbar__inner{padding:12px 16px}
  .brandPage{padding:20px 16px 44px}
  .brandFooter__inner{grid-template-columns: 1fr; padding:36px 16px}
}