/* ============ Buttons / Cards / Fields / Marquee ============ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 0.9rem 1.8rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-normal), background var(--duration-normal), color var(--duration-normal), border-color var(--duration-normal);
}
.btn--primary { background: var(--grad-mint); color: #041024; box-shadow: 0 0 0 rgba(77,141,255,0); }
.btn--primary:hover { box-shadow: var(--glow-mint); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0) scale(0.98); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,0.02); }
.btn--ghost:hover { border-color: var(--mint); color: var(--mint-bright); background: rgba(77,141,255,0.06); }
.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn--lg { padding: 1.1rem 2.3rem; font-size: 1.05rem; }
.btn:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 3px; }

/* sheen sweep on primary */
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg); transition: left 0.6s var(--ease-out-expo);
}
.btn--primary:hover::after { left: 130%; }

/* ---------- Service cards ---------- */
.service-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 2rem 2rem; background: var(--bg-card);
  overflow: hidden; transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.service-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(77,141,255,0.09), transparent 45%);
  transition: opacity var(--duration-normal); pointer-events: none;
}
.service-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,0.45), var(--glow-mint); }
.service-card:hover::before { opacity: 1; }
.service-card__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(77,141,255,0.08); border: 1px solid var(--line);
  margin-bottom: 1.5rem; font-size: 1.4rem;
}
.service-card__icon svg { width: 26px; height: 26px; stroke: var(--mint); fill: none; stroke-width: 1.8; }
.service-card h3 { font-size: var(--text-h3); margin-bottom: 0.8rem; }
.service-card p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.4rem; }
.service-card__link { font-weight: 600; font-size: 0.9rem; color: var(--mint); display: inline-flex; gap: 0.4rem; align-items: center; }
.service-card__link:hover { gap: 0.7rem; }
.service-card__num {
  position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--font-display);
  font-size: 0.8rem; color: var(--text-faint); letter-spacing: 0.1em;
}

/* ---------- Case cards ---------- */
.case-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-card); display: flex; flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.case-card:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 30px 70px rgba(0,0,0,0.5); }
.case-card__banner {
  padding: 2.4rem 2rem; position: relative; overflow: hidden;
  background: linear-gradient(140deg, rgba(77,141,255,0.14), rgba(34,211,238,0.04) 60%);
  border-bottom: 1px solid var(--line);
}
.case-card__banner::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  right: -70px; top: -70px; background: radial-gradient(circle, rgba(77,141,255,0.25), transparent 70%);
}
.case-card__tag { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); font-weight: 600; }
.case-card__metric { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); line-height: 1; margin-top: 0.6rem; background: var(--grad-mint); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-card__metric small { font-size: 0.42em; -webkit-text-fill-color: var(--text-dim); font-family: var(--font-body); font-weight: 500; display: block; margin-top: 0.5rem; letter-spacing: 0; }
.case-card__body { padding: 1.8rem 2rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; flex: 1; }
.case-card__body h3 { font-size: 1.25rem; }
.case-card__body > p { color: var(--text-dim); font-size: 0.92rem; flex: 1; }
.case-card__results { display: flex; flex-direction: column; gap: 0.5rem; }
.case-card__results li { font-size: 0.88rem; color: var(--text-dim); padding-left: 1.4rem; position: relative; }
.case-card__results li::before { content: "▲"; color: var(--mint); font-size: 0.6rem; position: absolute; left: 0; top: 0.35em; }
.case-card__results li strong { color: var(--text); }

.case-card__img { width: 100%; height: 190px; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line); }

/* ---------- Dashboard screenshots ("receipts") ---------- */
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1150px; margin: 0 auto; }
.shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); transition: transform var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal), box-shadow var(--duration-normal); }
.shot:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.shot img { width: 100%; display: block; background: #fff; }
.shot figcaption { padding: 1rem 1.3rem; font-size: 0.88rem; color: var(--text-dim); border-top: 1px solid var(--line); }
.shot figcaption strong { color: var(--mint); }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }

/* ---------- Testimonial marquee ---------- */
.marquee { overflow: hidden; padding: 0.8rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 1.4rem; width: max-content; will-change: transform; }
.t-card {
  width: 380px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); padding: 1.7rem 1.7rem 1.5rem;
  transition: border-color var(--duration-fast);
}
.t-card:hover { border-color: var(--line-strong); }
.t-card__stars { color: var(--gold); letter-spacing: 0.2em; font-size: 0.85rem; margin-bottom: 0.9rem; }
.t-card__quote { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 1.2rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.t-card__who { display: flex; align-items: center; gap: 0.8rem; }
.t-card__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  background: rgba(77,141,255,0.12); color: var(--mint); border: 1px solid var(--line-strong);
}
.t-card__who strong { display: block; font-size: 0.9rem; }
.t-card__who span { font-size: 0.78rem; color: var(--text-faint); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
.field label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); }
.field input, .field textarea {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.85rem 1rem; color: var(--text); font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(77,141,255,0.15); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }