:root{
  --header-max: 1200px;
  --header-h: 72px;
  --header-h-mobile: 64px;
  --pad-desktop: 24px;
  --pad-mobile: 20px;
  --border: #e6e9f2;
  --text: #0b1330;
  --muted: #4b5670;
  --cta: #00c167;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.header-inner{
  max-width: var(--header-max);
  margin: 0 auto;
  height: var(--header-h);
  padding-left: calc(var(--pad-desktop) + env(safe-area-inset-left));
  padding-right: calc(var(--pad-desktop) + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.header-left img{
  height: 40px;
  width: auto;
  display: block;
}

.header-nav{
  display: flex;
  align-items: center;
  gap: 22px;
}

.header-link{
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.header-link:hover{
  color: var(--text);
}

.header-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(120deg, var(--cta), #1ee181);
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(0, 193, 103, 0.22);
  white-space: nowrap;
}

.header-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(0, 193, 103, 0.28);
}

@media (max-width: 768px){
  .header-inner{
    height: var(--header-h-mobile);
    padding-left: calc(var(--pad-mobile) + env(safe-area-inset-left));
    padding-right: calc(var(--pad-mobile) + env(safe-area-inset-right));
  }

  .header-left img{ height: 34px; }

  .header-nav{ gap: 16px; }
  .header-link{ font-size: 14px; }
}