/* ─── Global Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Custom Properties ────────────────────────── */
:root {
  --gold:       #c9a227;
  --gold-light: #f0c040;
  --gold-dark:  #8b6f1e;
  --bg-dark:    #0a0a0f;
  --bg-mid:     #10101a;
  --text:       #e8dcc8;
  --text-muted: #a89070;
}

/* ─── Base ─────────────────────────────────────── */
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-dark);
  color: var(--text);
  overflow-x: hidden;
}

/* ─── Particles Canvas ─────────────────────────── */
#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ─── Radial glow background ───────────────────── */
.bg-center {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(201,162,39,.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%,  rgba(201,162,39,.10) 0%, transparent 70%),
    var(--bg-dark);
}

/* ─── Main ─────────────────────────────────────── */
main { position: relative; z-index: 1; }

/* ─── Glass Card ───────────────────────────────── */
.glass {
  background: rgba(16, 14, 8, 0.72) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(201,162,39,.25) !important;
  border-radius: 1.5rem !important;
  color: var(--text) !important;
}

/* ─── Accent bar ───────────────────────────────── */
.accent-bar {
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  margin-bottom: 1.5rem;
}

/* ─── Avatar ───────────────────────────────────── */
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(201,162,39,.15);
}
@media (min-width: 768px) {
  .avatar { width: 140px; height: 140px; }
}

/* ─── Title ────────────────────────────────────── */
.title {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .02em;
}

/* ─── Divider ──────────────────────────────────── */
.divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin-bottom: 1.5rem;
}

/* ─── Body text ────────────────────────────────── */
.content p { color: var(--text); line-height: 1.7; font-size: .97rem; }
.content h5 { color: var(--gold-light); }
.content ul li {
  color: var(--text-muted);
  padding-left: 1.25rem;
  position: relative;
  font-size: .95rem;
  line-height: 1.6;
}
.content ul li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: .55rem;
  top: .45em;
}

/* ─── WhatsApp Button ──────────────────────────── */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff !important;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  border: none;
  transition: transform .2s, box-shadow .2s, filter .2s;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .35);
}
.btn-whatsapp:hover,
.btn-whatsapp:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, .5);
  filter: brightness(1.08);
  color: #fff !important;
}
.btn-whatsapp:active { transform: translateY(0); }