/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border-radius: 99px; font-family: var(--font-b);
  font-size: 18px; font-weight: 600; cursor: pointer; border: none;
  text-decoration: none; transition: all .2s; white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(0,167,78,.95) 0%, rgba(0,143,66,.98) 100%);
  color: #fff; position: relative; overflow: hidden;
  border: 1px solid rgba(0,167,78,.6);
  box-shadow: 0 2px 0 rgba(0,60,25,.35), 0 4px 20px rgba(0,167,78,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.18) 0%, transparent 55%);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(0,180,85,.97) 0%, rgba(0,167,78,1) 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0,60,25,.35), 0 8px 32px rgba(0,167,78,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid var(--muted); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.2); }
.btn-ghost-light:hover { border-color: rgba(255,255,255,.5); }
.btn-lg  { padding: 14px 28px; font-size: 15px; border-radius: 999px; }
.btn-nav { padding: 9px 20px; font-size: 18px; }

/* ===== FOCUS STATES ===== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.faq-question:focus-visible { outline-offset: -2px; }

/* ===== TAG / BADGE ===== */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 24px;
}
.tag-green { background: var(--primary-l); color: var(--g700); }
.tag-dark  { background: rgba(0,167,78,.12); color: #00d460; border: 1px solid rgba(0,167,78,.2); }
.tag-dot   { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }

/* ===== KEYFRAMES ===== */
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes ticker  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes floatSlow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ===== SCROLL REVEALS ===== */
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ===== SECTION LABEL ===== */
.section-label {
  font-family: var(--font-m); font-size: .75rem; letter-spacing: .16em;
  color: var(--primary); text-transform: uppercase;
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem;
}
.section-label::before { content:''; width:22px; height:1px; background:var(--primary); }
.section-label.center { justify-content:center; }
.section-label.center::after { content:''; width:22px; height:1px; background:var(--primary); }