:root {
  --brand-primary: #65ada1;
  --brand-primary-ink: #ffffff;
  --brand-primary-dark: #247b6b;
  --brand-secondary: #d7e4e2;
  --brand-accent: #fffdfe;
  --brand-surface: #fefefe;
  --brand-surface-ink: #1f2937;

  --font-sans: 'Poppins', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem;
  --radius-lg: 16px;
  --shadow-layer: 0 10px 25px rgba(0,0,0,.15);
}

body { font-family: var(--font-sans); color: var(--brand-surface-ink); background: var(--brand-surface); line-height: 1.6; }
.btn { display:inline-block; padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-lg); background: var(--brand-primary); color: var(--brand-primary-ink); text-decoration:none; box-shadow: var(--shadow-layer); transition: transform .15s ease, filter .15s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05);}
.badge { display:inline-block; padding: .25rem .5rem; border-radius: 9999px; background: var(--brand-secondary); color: #fff; font-size: .85rem; }
.header { background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)); color:#fff; padding: var(--sp-8) var(--sp-4); box-shadow: var(--shadow-layer); }
.header .logo { font-weight:700; font-size: 1.75rem; letter-spacing: .02em;}
.card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-layer); padding: var(--sp-6); }
.footer { background: var(--brand-primary-dark); color:#e5e7eb; padding: var(--sp-6); font-size:.95rem; }
.hr-accent { height: 4px; border: 0; border-radius: 9999px; background: var(--brand-accent); }