/* ── Global ──────────────────────────────────────────────────────────────────*/
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }
input::-ms-reveal, input::-ms-clear { display: none; }

/* Full-screen modal backdrop — above sticky nav (z-50) */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Nav link underline animation ───────────────────────────────────────────*/
.nav-link { position: relative; transition: color 0.25s; }
.nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px; border-radius: 2px; background: #6366f1;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover { color: #6366f1; }
.nav-link:hover::after { width: 100%; }

/* ── Gradient text ───────────────────────────────────────────────────────────*/
.gradient-text {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Home page entry animations ─────────────────────────────────────────────*/
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes qr-spin { to { transform: rotate(360deg); } }

.anim-1      { animation: fadeInUp 0.55s 0.05s cubic-bezier(.16,1,.3,1) both; }
.anim-2      { animation: fadeInUp 0.55s 0.12s cubic-bezier(.16,1,.3,1) both; }
.anim-3      { animation: fadeInUp 0.55s 0.20s cubic-bezier(.16,1,.3,1) both; }
.anim-4      { animation: fadeInUp 0.55s 0.28s cubic-bezier(.16,1,.3,1) both; }
.anim-5      { animation: fadeInUp 0.55s 0.36s cubic-bezier(.16,1,.3,1) both; }
.anim-mockup { animation: scaleIn  0.65s 0.18s cubic-bezier(.16,1,.3,1) both; }
.float       { animation: floatY 5s ease-in-out infinite; }

/* ── Auth page animations (guest layout) ────────────────────────────────────*/
@keyframes pulse-ring {
    0%   { transform: scale(0.9); opacity: 0.7; }
    70%  { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(0.9); opacity: 0; }
}
.animate-fadeInUp   { animation: fadeInUp 0.55s cubic-bezier(.16,1,.3,1) both; }
.animate-float      { animation: floatY 3s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }

/* Animation delays — used on form field rows */
.delay-100 { animation-delay: .10s; }
.delay-200 { animation-delay: .20s; }
.delay-300 { animation-delay: .30s; }
.delay-400 { animation-delay: .40s; }

/* ── Buttons ─────────────────────────────────────────────────────────────────*/
.btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 22px;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: white; font-weight: 600; border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
    font-size: 0.9rem; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(99,102,241,0.48); }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 20px; background: white; color: #374151;
    font-weight: 600; border-radius: 12px; border: 1.5px solid #e5e7eb;
    transition: all 0.2s ease; font-size: 0.9rem; text-decoration: none;
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.08); border-color: #c7d2fe; color: #4f46e5; }

/* ── Feature cards ───────────────────────────────────────────────────────────*/
.feature-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -8px rgba(99,102,241,0.14); border-color: #c7d2fe !important; }
.feature-icon { transition: transform 0.3s ease; }
.feature-card:hover .feature-icon { transform: scale(1.1); }