/* brand.css — 21 Oct 2026 (owner): pixelwebid.com uses the SAME brand as pixelweb.id
   (dark teal #0b2223, teal #14535a, gold #e5b93f, cream #fbf9f4; Sora headings + Manrope body; bar-chart logo).
   Loaded last so it overrides the older blue palette. */
:root {
    --color-primary: #0b2223;
    --color-secondary: #14535a;
    --color-accent: #14535a;
    --color-accent-hover: #0f3f44;
    --color-gold: #e5b93f;
    --color-gold-hover: #d4a72f;
    --color-bg-alt: #f7f4ef;
    --color-border: #e7e1d6;
    --color-text: #132b29;
    --color-text-light: #5b6b69;
    --gradient-hero: linear-gradient(135deg, #fbf9f4 0%, #f3ecdf 100%);
    --gradient-accent: linear-gradient(135deg, #14535a 0%, #0b2223 100%);
    --font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Sora', 'Manrope', sans-serif;
}
body { font-family: var(--font-family); color: var(--color-text); background: #fff; }
h1, h2, h3, h4, .section-header h2, .pwid-plan h3 { font-family: var(--font-heading); letter-spacing: -0.02em; color: var(--color-primary); }
a { color: var(--color-accent); }
.btn-primary { background: var(--color-gold); color: #0b2223; font-weight: 700; }
.btn-primary:hover { background: var(--color-gold-hover); color: #0b2223; box-shadow: 0 6px 16px rgba(169, 126, 18, .28); }
.btn-secondary { color: var(--color-primary); border-color: rgba(19, 43, 41, .24); }
.site-header { background: rgba(251, 249, 244, .96); border-bottom-color: var(--color-border); }
.hero { background: var(--gradient-hero); }
.section-alt { background: var(--color-bg-alt); }
.pwid-plan.is-popular { border-color: var(--color-gold); box-shadow: 0 10px 30px rgba(169, 126, 18, .14); }
.pwid-plan-tag { background: var(--color-gold) !important; color: #0b2223; }
.pwid-plan li:before { border-color: var(--color-gold); }
.nav-link.active, .nav-link:hover { color: var(--color-accent); }
/* logo: same bar-chart mark + wordmark as pixelweb.id */
.pw-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.pw-brand-word { font-family: var(--font-heading); font-weight: 700; font-size: 19px; letter-spacing: -.3px; color: #0b2223; }
.site-footer .pw-brand-word, footer .pw-brand-word { color: #fbf9f4; }
footer, .site-footer { background: #0b2223; }