/* Login page — decorative floating cards */
.af-1{ top: 70px; right: 50px; animation-delay: 0s; }
.af-1 .af-ic{ background: linear-gradient(135deg,#1abc88,#0d8a5f); }
.af-2{ bottom: 100px; right: 40px; animation-delay: -2s; }
.af-2 .af-ic{ background: linear-gradient(135deg,#f5b73c,#d4901c); }
.af-3{ top: 50%; left: 32px; animation-delay: -4s; }
.af-3 .af-ic{ background: linear-gradient(135deg,#4f8cff,#2950bd); }

/* Animated background chart line */
.brand-chart-bg{
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 220px; pointer-events: none;
    opacity: .25; z-index: 0;
}
.brand-chart-bg svg{ width: 100%; height: 100%; display:block; }
.brand-chart-bg .line{
    fill: none; stroke: #1abc88; stroke-width: 2;
    stroke-dasharray: 1800; stroke-dashoffset: 1800;
    animation: drawLine 4s ease-out forwards;
}
.brand-chart-bg .area{ fill: url(#brandAreaGrad); opacity: 0; animation: fadeArea 2s 1.5s forwards; }
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
@keyframes fadeArea{ to{ opacity: 1; } }

/* Make sure auth-brand-head sits above the bg chart */
.auth-brand-head,
.auth-benefits,
.auth-testimonial{ position: relative; z-index: 1; }