/* FluxFront — voice + SMS agent band (#voice, dark). Copy left, illustrative call card right. */
/* ===================== AGENT BAND ===================== */
.agent { background: var(--ink-deep) radial-gradient(1200px 500px at 85% 0%, rgb(45 212 191 / 0.14), transparent 60%); }
.agent .h2 { margin-top: 16px; }
.agent .lead { margin-top: 18px; max-width: 52ch; }
.agent-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.agent-points li { position: relative; padding-left: 26px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-deep-text); }
.agent-points li b { color: #fff; font-weight: 600; }
.agent-points li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%;
  background: rgb(45 212 191 / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }

.callcard { background: var(--ink-panel); border: 1px solid var(--ink-line); border-radius: var(--r-xl); padding: 22px 24px 20px;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.35); max-width: 560px; margin-left: auto; }
.callcard-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-xs); color: var(--ink-deep-mute); }
.callcard-live { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.callcard-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgb(45 212 191 / 0.2); animation: ccPulse 1.6s ease-out infinite; }
@keyframes ccPulse { 0% { box-shadow: 0 0 0 0 rgb(45 212 191 / 0.45); } 100% { box-shadow: 0 0 0 9px rgb(45 212 191 / 0); } }
.callcard-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.callcard-steps li { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ink-line); font-size: var(--t-sm); }
.callcard-steps li:first-child { border-top: 0; }
.cc-k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); padding-top: 3px; }
.cc-v { color: #fff; line-height: 1.45; }
.callcard-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink-line); }
.callcard .chip { background: transparent; border-color: var(--ink-line); color: var(--ink-deep-text); }
@media (max-width: 900px) { .callcard { margin-left: 0; max-width: none; } }
@media (max-width: 480px) { .callcard-steps li { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .callcard-live i { animation: none; } }