:root {
  --brand: #0891b2;
  --brand-dark: #067988;
  --ink: #132f38;
  --muted: #60747c;
  --line: #e5f1f3;
  --soft: #f6fbfc;
}

body {
  color: var(--ink);
  background: var(--soft);
}

header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

.header-inner {
  max-width: 1180px !important;
  height: 68px !important;
  margin: 0 auto;
  padding: 0 20px;
}

.logo, .brand {
  color: var(--brand-dark) !important;
  font-weight: 800 !important;
}

.logo-icon, .brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg,#0891b2,#18c8c1) !important;
  box-shadow: 0 8px 24px rgba(8,145,178,.22);
}

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

.nav a {
  margin-left: 0 !important;
  color: #4c6670 !important;
  font-size: 15px !important;
}

.nav a:hover, .nav a.active {
  color: var(--brand-dark) !important;
}

.nav a:last-child {
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--brand);
  font-weight: 700;
}

.page-header, .article-header, .qr-cta {
  background: linear-gradient(135deg, #07849a 0%, #10b8bc 62%, #6ee7d8 100%) !important;
}

.page-header {
  padding: 96px 0 62px !important;
  text-align: left !important;
}

.page-header h1 {
  font-size: clamp(34px, 4vw, 56px) !important;
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 12px !important;
}

.page-header p {
  max-width: 680px;
  font-size: 18px !important;
  opacity: .92 !important;
}

.about-section, .articles-section {
  padding: 72px 0 !important;
}

.about-card, .article-item, .tip-box, .step-box, .related-item {
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 16px 40px rgba(6,61,72,.06) !important;
}

.about-card {
  padding: 34px !important;
}

.about-card h2, .article-body h2 {
  border-left-color: var(--brand) !important;
  color: #102d35 !important;
}

.about-card p, .article-item p, .article-body p, .article-body li {
  color: var(--muted) !important;
}

.about-card strong, .value-item h4, .article-more, .back-link, .article-body strong {
  color: var(--brand-dark) !important;
}

.value-item, .contact-item {
  border-radius: 8px !important;
  border: 1px solid var(--line) !important;
  background: #f1fbfc !important;
}

.contact-icon {
  border-radius: 8px !important;
  color: var(--brand-dark);
  background: #e7fbfb !important;
}

.article-item {
  padding: 28px 30px !important;
}

.article-item:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(8,145,178,.28) !important;
  box-shadow: 0 18px 44px rgba(6,61,72,.1) !important;
}

.article-tag {
  border-radius: 999px !important;
  background: #e7fbfb !important;
  color: var(--brand-dark) !important;
}

.article-header {
  padding: 96px 0 54px !important;
}

.article-header h1 {
  font-size: clamp(30px, 3.4vw, 46px) !important;
  line-height: 1.25 !important;
}

.article-body {
  max-width: 860px;
  margin: -26px auto 0 !important;
  border: 1px solid var(--line);
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(6,61,72,.06);
}

.qr-cta-box, .qr-cta .final-qr {
  border-radius: 8px !important;
  box-shadow: 0 18px 45px rgba(2,44,55,.16);
}

footer {
  background: #102d35 !important;
  color: rgba(255,255,255,.72) !important;
}

.footer-col h4, .footer-grid h3, .footer-grid h4 {
  color: #fff !important;
}

.footer-col p, .footer-col a, .footer-grid p, .footer-grid a {
  color: rgba(255,255,255,.68) !important;
}

.footer-bottom {
  border-top-color: rgba(255,255,255,.1) !important;
}

@media (max-width: 768px) {
  .header-inner {
    height: 62px !important;
  }

  .nav {
    display: none !important;
  }

  .page-header, .article-header {
    padding-top: 82px !important;
  }

  .about-card, .article-item {
    padding: 22px !important;
  }

  .article-body {
    margin: -20px 14px 0 !important;
    padding: 24px 20px 40px !important;
  }
}