/* ==========================================
   ClickFlow - Animações e Estilos da Home
   ========================================== */

/* Animações de Scroll (Reveal) */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.95); }
[data-reveal].is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Animações suaves para os cards */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.use-case-card { animation: fadeInUp 0.6s ease-out; }
.use-case-card:nth-child(1) { animation-delay: 0.1s; }
.
slider customizado */
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #0ea5e9;
}

.slider::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #0ea5e9;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #0ea5e9;
}

/* Melhorias de acessibilidade */
.use-case-card:focus { outline: 2px solid #0ea5e9; outline-offset: 2px; }

/* Animação de loading para os cálculos */
@keyframes pulse-green {
    0%, 100% { color: #22c55e; }
    50% { color: #16a34a; }
}

.savings-calculating { animation: pulse-green 1.5s infinite; }

/* Estilos para contador animado e destaques */
#qrCounter { font-variant-numeric: tabular-nums; transition: color 0.3s ease; }
mark { background-color: rgba(234, 179, 8, 0.2); color: #fbbf24; padding: 0 2px; border-radius: 2px; }

/* Animação para FAQ items */
.faq-item { transition: all 0.3s ease; }
.faq-item.hidden { opacity: 0; transform: translateY(-10px); }

/* Animação de pulso para chamar atenção na demonstração */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
    100% { box-shadow: 0 0 0 20px rgba(56, 189, 248, 0); }
}
.pulse-attention {
    animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================
   ClickFlow - Global Component Utilities 
   ========================================== */

.section-eyebrow {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    background-image: linear-gradient(to right, #38bdf8, #d946ef, #f97316); /* from-sky-400 via-fuchsia-500 to-orange-500 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.btn-gradient-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, #38bdf8, #d946ef, #f97316);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(217, 70, 239, 0.2), 0 4px 6px -4px rgba(217, 70, 239, 0.1);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-gradient-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(217, 70, 239, 0.4), 0 4px 6px -4px rgba(217, 70, 239, 0.2);
}

.btn-glass-sky {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(14, 165, 233, 0.3);
    background-color: rgba(14, 165, 233, 0.1);
    color: #38bdf8;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-glass-sky:hover {
    background-color: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.5);
    color: #7dd3fc;
}

.input-glass {
    border: 1px solid #1e293b; /* border-slate-800 */
    background-color: #020617; /* bg-slate-950 */
    color: #ffffff;
    outline: none;
    transition: all 0.3s ease;
}

.input-glass:focus {
    border-color: #0ea5e9; /* focus:border-sky-500 */
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2); /* focus:ring-2 focus:ring-sky-500/20 */
}