/* EKN Feature Cards - Frontend Styles */
.ekn-fc-wrap {
    display: grid;
    grid-template-columns: repeat(var(--ekn-cols, 4), 1fr);
    gap: 1.25rem;
    padding: 1.5rem 0;
    background: var(--ekn-bg, #1a0a1e);
    border-radius: 1rem;
    padding: 1.5rem;
}

@media (max-width: 1024px) {
    .ekn-fc-wrap { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ekn-fc-wrap { grid-template-columns: 1fr; }
}

/* ── Card Base ── */
.ekn-fc-card {
    position: relative;
    background: var(--ekn-card-bg, #1f0f25);
    border-radius: 0.875rem;
    padding: 1.5rem;
    overflow: hidden;
    cursor: default;
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    animation: ekn-fc-fadein 0.45s ease both;
    color: var(--ekn-text, #ffffff);
    transition: transform 0.25s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

@keyframes ekn-fc-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Badge ── */
.ekn-fc-badge {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    background: var(--ekn-accent, #c0392b);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.2em 0.6em;
    border-radius: 100px;
    line-height: 1.5;
}

/* ── Icon ── */
.ekn-fc-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--ekn-icon-bg, #2d1533);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s ease, transform 0.25s ease;
    border: 1px solid rgba(255,255,255,0.08);
}
.ekn-fc-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* ── Title ── */
.ekn-fc-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--ekn-text, #ffffff);
    line-height: 1.3;
}

/* ── Description ── */
.ekn-fc-desc {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.62);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}
.ekn-fc-style-light .ekn-fc-desc { color: rgba(0,0,0,0.55); }

/* ── CTA ── */
.ekn-fc-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ekn-accent, #c0392b);
    text-decoration: none;
    margin-top: 0.25rem;
    transition: gap 0.2s ease, opacity 0.2s ease;
}
.ekn-fc-cta:hover { opacity: 0.8; gap: 0.55rem; }
.ekn-fc-arrow { transition: transform 0.2s ease; }
.ekn-fc-cta:hover .ekn-fc-arrow { transform: translateX(3px); }

/* ── Shine overlay ── */
.ekn-fc-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.07) 0%, transparent 65%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════
   HOVER EFFECTS
═══════════════════════════════════════════════ */

/* Lift */
.ekn-fc-hover-lift .ekn-fc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--ekn-accent, #c0392b) inset;
}
.ekn-fc-hover-lift .ekn-fc-card:hover .ekn-fc-icon-wrap {
    background: var(--ekn-accent, #c0392b);
    transform: scale(1.1);
}

/* Glow */
.ekn-fc-hover-glow .ekn-fc-card:hover {
    box-shadow: 0 0 30px rgba(192,57,43,0.35), 0 0 60px rgba(192,57,43,0.15);
    border-color: var(--ekn-accent, #c0392b);
}
.ekn-fc-hover-glow .ekn-fc-card:hover .ekn-fc-icon-wrap {
    background: var(--ekn-accent, #c0392b);
}

/* Shine */
.ekn-fc-hover-shine .ekn-fc-card:hover .ekn-fc-shine { opacity: 1; }
.ekn-fc-hover-shine .ekn-fc-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-3px);
}

/* Border */
.ekn-fc-hover-border .ekn-fc-card {
    border: 2px solid transparent;
    background-clip: padding-box;
}
.ekn-fc-hover-border .ekn-fc-card:hover {
    border-color: var(--ekn-accent, #c0392b);
}

/* Scale */
.ekn-fc-hover-scale .ekn-fc-card:hover {
    transform: scale(1.04);
    box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}
.ekn-fc-hover-scale .ekn-fc-card:hover .ekn-fc-icon-wrap {
    background: var(--ekn-accent, #c0392b);
}

/* ═══════════════════════════════════════════════
   CARD STYLES
═══════════════════════════════════════════════ */

/* Light */
.ekn-fc-style-light .ekn-fc-card {
    background: var(--ekn-card-bg, #f8f8f8);
    border-color: rgba(0,0,0,0.08);
    color: #111;
}
.ekn-fc-style-light .ekn-fc-title { color: #111; }
.ekn-fc-style-light .ekn-fc-icon-wrap { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.08); }

/* Glass */
.ekn-fc-style-glass .ekn-fc-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.12);
}

/* Bordered */
.ekn-fc-style-bordered .ekn-fc-card {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.12);
}
.ekn-fc-style-bordered .ekn-fc-card:hover { border-color: var(--ekn-accent, #c0392b); }

/* Gradient */
.ekn-fc-style-gradient .ekn-fc-card {
    background: linear-gradient(135deg, var(--ekn-card-bg, #1f0f25) 0%, rgba(192,57,43,0.12) 100%);
    border: 1px solid rgba(192,57,43,0.2);
}