/* ============================================================
   Circi — Theme · Twilight (Periwinkle + Peach)
   Soft periwinkle/indigo light blue with warm peach accent.
   ============================================================ */

:root {
  /* Primary: Periwinkle indigo */
  --navy:        #4F46E5;     /* indigo-600 */
  --navy-deep:   #3730A3;
  --navy-2:      #6366F1;
  --navy-3:      #A5B4FC;

  /* Ink */
  --ink:         #1E1B4B;
  --ink-2:       #475569;
  --ink-3:       #94A3B8;

  /* Surfaces — light lavender-tinted */
  --rule:        #E0E2F0;
  --rule-soft:   #EEF0F9;
  --paper:       #F6F6FB;
  --paper-2:     #E9EAF6;
  --surface:     #FFFFFF;
  --surface-2:   #F6F6FB;

  /* Secondary accent: Warm peach */
  --teal:        #FB923C;     /* orange-400 / peach */
  --teal-deep:   #EA580C;
  --teal-ink:    #9A3412;
  --teal-soft:   #FFEDD5;

  /* Success: cool emerald */
  --success:      #10B981;
  --success-deep: #047857;
  --success-soft: #D1FAE5;
  --success-ink:  #065F46;
}

/* Avatars */
.directory .card .av.teal,
.testimonials .q-avatar.teal {
  background: linear-gradient(135deg, #FB923C, #C2410C) !important;
  color: #fff !important;
}
.directory .card .av.navy,
.testimonials .q-avatar.navy {
  background: linear-gradient(135deg, #6366F1, #3730A3) !important;
  color: #fff !important;
}
.directory .card .av.plum,
.testimonials .q-avatar.plum {
  background: linear-gradient(135deg, #C084FC, #7C3AED) !important;
  color: #fff !important;
}
.testimonials .q-avatar.gold {
  background: linear-gradient(135deg, #FBBF24, #B45309) !important;
  color: #fff !important;
}
.testimonials .q-avatar.sage {
  background: linear-gradient(135deg, #34D399, #047857) !important;
  color: #fff !important;
}

/* Translucent accent mixes */
.site-footer .newsletter .nl-form:focus-within { box-shadow: 0 0 0 4px rgba(251,146,60,0.18); }
.directory .chip.consult { border-color: rgba(251,146,60,0.32); background: var(--teal-soft) !important; color: var(--teal-ink) !important; }
.directory .chip.consult svg { color: var(--teal-deep) !important; }
.trust .pi-ico { background: var(--teal-soft); color: var(--teal-ink); border-color: rgba(251,146,60,0.24); }
.trust .statement-glyph .gtile { background: var(--teal-soft); color: var(--teal-deep); border-color: rgba(251,146,60,0.24); }
.statement-card p.statement-body .em,
.trust p.statement-body .em {
  background: linear-gradient(180deg, transparent 64%, rgba(251,146,60,0.30) 64%) !important;
}

/* Billing chip — emerald */
.directory .chip.billing {
  background: var(--success-soft) !important;
  color: var(--success-ink) !important;
  border-color: rgba(16,185,129,0.30) !important;
}
.directory .chip.billing svg { color: var(--success-deep) !important; }

/* GP CTA */
.built .col.gp .col-cta .button { background: var(--teal); color: #fff !important; }
.built .col.gp .col-cta .button:hover { background: var(--teal-deep); }

/* Hero sheen */
.hero {
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(165,180,252,0.16), transparent 70%),
    var(--paper);
}

/* Ghost button + footer hairlines */
.btn-ghost { border-color: rgba(79,70,229,0.22) !important; }
.btn-ghost:hover { background: rgba(79,70,229,0.04) !important; }
.site-footer .newsletter {
  border-top-color: rgba(79,70,229,0.10);
  border-bottom-color: rgba(79,70,229,0.10);
}