:root {
  --navy: #171b46;
  --navy-deep: #101432;
  --royal: #087db7;
  --cyan: #18a6d2;
  --cyan-dark: #08789e;
  --gold: #c9a34d;
  --gold-light: #e5ca7a;
  --ink: #202542;
  --paper: #f7f7f5;
}

body {
  background: linear-gradient(180deg, #fff 0, #f9fafb 55%, #f7f7f5 100%);
}

.notice {
  background: linear-gradient(90deg, var(--navy-deep), var(--navy), #163d6d);
  color: #f8f1dc;
  border-bottom: 1px solid rgba(229,202,122,.35);
}

.brand-mark {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--navy) 5%, var(--royal) 48%, var(--cyan) 68%, var(--gold-light) 69%, var(--gold) 100%);
  border: 1px solid rgba(229,202,122,.7);
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(23,27,70,.2), inset 0 1px rgba(255,255,255,.32);
}

.brand-mark::after {
  content: '';
  position: absolute;
  inset: -60% -90%;
  transform: rotate(32deg);
  background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.38), transparent 58%);
}

.brand > span > span {
  background: linear-gradient(90deg, var(--royal), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.header {
  border-bottom: 1px solid rgba(201,163,77,.18);
  box-shadow: 0 10px 32px rgba(23,27,70,.09);
}

.btn,
.card-actions a,
.filters button.active {
  background: linear-gradient(120deg, var(--royal), var(--cyan));
  color: #fff;
  box-shadow: 0 10px 24px rgba(8,125,183,.25);
}

.btn:hover,
.card-actions a:hover {
  background: linear-gradient(120deg, #076da1, #24b9df);
}

.btn-ghost,
.card-actions a + a {
  background: linear-gradient(120deg, var(--navy-deep), var(--navy));
  color: #fff;
}

.eyebrow,
.category {
  color: var(--royal);
}

.hero-shade {
  background: linear-gradient(90deg, rgba(250,250,248,.98) 0%, rgba(249,250,250,.92) 35%, rgba(23,27,70,.1) 70%, rgba(201,163,77,.08));
}

.hero-dot.active,
.slide-dot.active {
  background: linear-gradient(90deg, var(--royal), var(--cyan), var(--gold-light));
}

.injection-banner,
.process {
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 48%, #0d4c78 100%);
}

.injection-banner {
  border-top: 1px solid rgba(229,202,122,.34);
  border-bottom: 1px solid rgba(229,202,122,.28);
}

.injection-banner-copy strong,
.process h2 {
  color: #fff;
}

.injection-banner .availability-image {
  border: 1px solid rgba(229,202,122,.7);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.catalog {
  background: linear-gradient(180deg, #f8f9fa, #f3f2ed);
}

.card {
  border: 1px solid rgba(201,163,77,.16);
  border-top: 3px solid rgba(201,163,77,.72);
  box-shadow: 0 18px 55px rgba(23,27,70,.09);
}

.card-price { margin:8px 0 4px; color:var(--gold); font:700 22px Marcellus,serif; }

.section-head h2::after,
.intro h2::after,
.faq h2::after {
  content:'';
  display:block;
  width:54px;
  height:2px;
  margin:14px auto 0;
  background:linear-gradient(90deg,var(--royal),var(--gold-light),var(--gold));
}

.section-head h2::after { margin-left:0; }

.card-visual,
.card-visual.wellness,
.card-visual.longevity {
  background: radial-gradient(circle at 78% 20%, rgba(229,202,122,.38), transparent 24%), linear-gradient(145deg, var(--navy-deep), var(--royal) 68%, var(--cyan));
}

.medical-note {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, #fff9e9, #edf8fb);
}

.stats {
  border-color: rgba(201,163,77,.34);
}

.stats strong {
  color: var(--gold);
}

.contact {
  background: linear-gradient(135deg, #eef8fa, #fbf7eb);
}

.contact form {
  border: 1px solid rgba(201,163,77,.2);
}

footer {
  background: linear-gradient(110deg, #0c102a, var(--navy), #123f67);
  border-top: 2px solid var(--gold);
}

/* Back-office navigation contrast over the branded dark gradient. */
body > aside .brand { color: #fff !important; }
body > aside a { color: #eef4fb !important; }
body > aside a:hover,
body > aside a:focus-visible { background: rgba(255,255,255,.11) !important; color: #fff !important; }
body > aside a.active { background: linear-gradient(90deg, rgba(201,163,77,.28), rgba(229,202,122,.10)) !important; color: #f3d889 !important; border-left: 3px solid var(--gold-light); }

.faq-wa,
.header nav a:hover {
  color: var(--royal);
}

@media (max-width: 620px) {
  .hero-shade {
    background: linear-gradient(90deg, rgba(250,250,248,.98), rgba(250,250,248,.9) 74%, rgba(23,27,70,.28));
  }
}