/* aikeep.io - custom styles */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Schema diagram */
.schema {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    flex-wrap: nowrap;
    text-align: center;
    font-weight: 600;
}
.schema-box {
    padding: 14px 16px;
    border: 2px solid #3b82f6;
    border-radius: 10px;
    color: #fff;
    min-width: 130px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}
.schema-box.blocked { border-color: #ef4444; color: #f87171; text-decoration: line-through; opacity: 0.7; }
.schema-arrow { font-size: 1.4rem; color: #4b5563; flex-shrink: 0; }

/* Compare table */
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(55,65,81,0.4);
    vertical-align: top;
    font-size: 0.9rem;
}
.compare-table th {
    color: #6b7280;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(0,0,0,0.3);
}
.compare-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Feature card hover */
.feature-card {
    transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover {
    border-color: rgba(59,130,246,0.4) !important;
    transform: translateY(-2px);
}

/* Pricing card */
.pricing-card {
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover {
    border-color: #3b82f6 !important;
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(59,130,246,0.12);
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(6px);
}
.modal-overlay.active { display: flex; }

/* Animate gradient border on recommended card */
@keyframes pulse-border {
    0%, 100% { box-shadow: 0 0 15px rgba(59,130,246,0.15); }
    50% { box-shadow: 0 0 30px rgba(59,130,246,0.3); }
}
.recommended-card { animation: pulse-border 3s ease-in-out infinite; }

/* Scrollbar dark */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

@media (max-width: 768px) {
    .schema { flex-wrap: wrap; }
    .schema-arrow { transform: rotate(90deg); }
}