:root{
  --cta-radius: 9999px;
  --cta-dur: .14s;
  --cta-ease: cubic-bezier(.2,.6,.2,1);
  --cta-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  --cta-shadow-hover: 0 10px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  --cta-shadow-active: 0 6px 16px rgba(0,0,0,.18);
  --cta-bg-1: rgba(34,197,94,.22);
  --cta-bg-2: rgba(16,185,129,.14);
  --cta-bd:   rgba(34,197,94,.38);
  --cta-text: #E6FFF2;
}
.cta{
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background: linear-gradient(180deg,var(--cta-bg-1),var(--cta-bg-2));
  border: 1px solid var(--cta-bd);
  border-radius: var(--cta-radius);
  box-shadow: var(--cta-shadow);
  color: var(--cta-text);
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; line-height:1;
  padding:.55rem .9rem;
  text-decoration:none;
  transition: transform var(--cta-dur) var(--cta-ease),
              box-shadow var(--cta-dur) var(--cta-ease),
              background .2s ease, color .2s ease;
}
.cta:hover{ transform: translateY(-1px); box-shadow: var(--cta-shadow-hover); }
.cta:active{ transform: translateY(0); box-shadow: var(--cta-shadow-active); }
.cta:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px; }
.cta__icon{ width:1.05em; height:1.05em; flex:0 0 auto; display:inline-block; }
.cta[data-size="sm"]{ padding:.45rem .75rem; }
.cta[data-size="lg"]{ padding:.7rem 1.1rem; font-size:1.03rem; }
/* Variants */
.cta--view{    --cta-bg-1: rgba(34,197,94,.22);  --cta-bg-2: rgba(16,185,129,.14); --cta-bd: rgba(34,197,94,.38);  --cta-text:#E6FFF2; }
.cta--download{--cta-bg-1: rgba(16,185,129,.20); --cta-bg-2: rgba(5,150,105,.12);  --cta-bd: rgba(16,185,129,.36); --cta-text:#E6FFF2; }
.cta--recent{  --cta-bg-1: rgba(168,85,247,.22); --cta-bg-2: rgba(140,73,220,.16); --cta-bd: rgba(168,85,247,.38); --cta-text:#F1E9FF; }
.cta--discuss{ --cta-bg-1: rgba(251,146,60,.22); --cta-bg-2: rgba(245,120,35,.16); --cta-bd: rgba(251,146,60,.42); --cta-text:#FFF3E5; }
.cta--li{      --cta-bg-1: rgba(59,130,246,.22); --cta-bg-2: rgba(37,99,235,.16);  --cta-bd: rgba(59,130,246,.42); --cta-text:#E7F1FF; }
.cta--now{     --cta-bg-1: rgba(96,165,250,.22); --cta-bg-2: rgba(79,70,229,.16);  --cta-bd: rgba(96,165,250,.38); --cta-text:#EEF0FF; }
@media (prefers-reduced-motion: reduce){
  .cta, .cta:hover, .cta:active{ transition:none; transform:none; box-shadow: var(--cta-shadow); }
}
@media (forced-colors: active) {
  .cta{ border-color: CanvasText; background: ButtonFace; color: ButtonText; }
  .cta:focus-visible{ outline:2px solid CanvasText; }
}