/*
 * Enjezly public home — identity alignment layer.
 * Layout stays owned by landing_page.html during the gradual migration.
 */

:root[data-ej-theme="dark"] {
    --primary: var(--ej-action-primary);
    --primary-dark: var(--ej-action-primary-hover);
    --primary-light: var(--ej-primary-soft);
    --accent: var(--ej-accent);
    --accent-dark: var(--ej-action-accent-hover);
    --dark: var(--ej-page);
    --dark2: var(--ej-page-raised);
    --surface: var(--ej-surface);
    --surface2: var(--ej-surface-subtle);
    --text: var(--ej-text);
    --text-muted: var(--ej-text-muted);
    --white: var(--ej-color-neutral-0);
    --green: var(--ej-success);
    --border: var(--ej-border);
    --shadow: var(--ej-shadow-md);
    --radius: var(--ej-radius-lg);
    --radius-sm: var(--ej-radius-md);
}

/* The public shell shares the same quiet visual language as the page. */
.main-header {
    background: var(--ej-header-bg);
    border-color: var(--ej-border);
    box-shadow: none;
    backdrop-filter: blur(14px);
}
.nav-links a:not(.login-button) { color: var(--ej-text-muted); }
.nav-links a:not(.login-button):hover { color: var(--ej-primary); }
.login-button,
.btn-primary,
.pkg-btn {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text) !important;
    box-shadow: none;
}
.login-button:hover,
.btn-primary:hover,
.pkg-btn:hover {
    background: var(--ej-action-primary-hover);
    box-shadow: none;
    transform: translateY(-1px);
}
.main-footer { background: var(--ej-page-raised); border-color: var(--ej-border); }

/* Remove decorative AI-like glow while preserving the hero composition. */
.hero-bg,
.hero-grid-lines,
.hero-visual-glow,
.showcase-img-glow { display: none; }
.hero,
#features,
#how-it-works,
#packages { background: var(--ej-page); }
#showcase,
#faq { background: var(--ej-page-raised); }
.hero-badge {
    background: var(--ej-primary-soft);
    border-color: var(--ej-border-brand);
    color: var(--ej-primary);
}
.hero-badge,
.hero-badge .dot,
.hero-text h1,
.hero-text > p,
.hero-actions,
.hero-note,
.hero-visual,
.hero-visual img,
.float-card { animation: none; }
.hero-text h1 .highlight,
.section-eyebrow { color: var(--ej-primary); }
.hero-text h1 .highlight::after {
    height: 2px;
    background: var(--ej-primary);
}
.hero-visual img { filter: none; }
.float-card {
    background: var(--ej-surface);
    border-color: var(--ej-border);
    box-shadow: var(--ej-shadow-sm);
    backdrop-filter: none;
}

/* One hierarchy for cards: border first, shadow only on interaction. */
.stats-bar,
.feature-card,
.step-card,
.pkg-card,
.toggle-group {
    background: var(--ej-surface);
    border-color: var(--ej-border);
}
.feature-card::before { display: none; }
.feature-card,
.step-card,
.pkg-card {
    transition: border-color var(--ej-duration-fast) var(--ej-ease),
                box-shadow var(--ej-duration-fast) var(--ej-ease),
                transform var(--ej-duration-fast) var(--ej-ease);
}
.feature-card:hover,
.step-card:hover,
.pkg-card:hover {
    border-color: var(--ej-border-brand);
    box-shadow: var(--ej-shadow-sm);
    transform: translateY(-2px);
}
.feature-icon {
    background: var(--ej-primary-soft);
    color: var(--ej-primary);
}
.step-num {
    background: var(--ej-action-primary);
    box-shadow: none;
}
.steps-grid::before { background: var(--ej-border-brand); }

/* CTA areas remain prominent without gradients or glow. */
.trial-cta {
    background: var(--ej-page-raised);
    border-color: var(--ej-border);
}
.trial-cta::before,
.final-cta::before { display: none; }
.btn-accent {
    background: var(--ej-accent);
    color: var(--ej-on-accent) !important;
    box-shadow: none;
}
.btn-accent:hover {
    background: var(--accent-dark);
    box-shadow: none;
    transform: translateY(-1px);
}
.final-cta { background: var(--ej-action-primary); }
.btn-white { box-shadow: none; }
.btn-white:hover { box-shadow: var(--ej-shadow-sm); transform: translateY(-1px); }

/* Featured means clearer hierarchy, not a glowing oversized card. */
.pkg-card.featured,
.pkg-card.featured:hover {
    background: var(--ej-surface-subtle);
    border: 2px solid var(--ej-action-primary);
    box-shadow: var(--ej-shadow-sm);
    transform: none;
}
.pkg-card.featured .pkg-name { color: var(--ej-primary); }
.pkg-card.featured .pkg-period,
.pkg-card.featured .pkg-features li { color: var(--ej-text-muted); }
.pkg-card.featured .pkg-currency,
.pkg-card.featured .pkg-features li .chk { color: var(--ej-accent); }
.pkg-card.featured .pkg-btn {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text) !important;
}
.pkg-card.featured .pkg-btn:hover { background: var(--ej-action-primary-hover); }
.toggle-btn { transition: background var(--ej-duration-fast) var(--ej-ease), color var(--ej-duration-fast) var(--ej-ease); }
.toggle-btn.active { background: var(--ej-action-primary); box-shadow: none; }
.faq-item summary { transition: color var(--ej-duration-fast) var(--ej-ease); }
.faq-item summary:hover,
.faq-item[open] summary::after { color: var(--ej-primary); }

/* Consistent keyboard focus across the marketing page. */
.login-button:focus-visible,
.hero a:focus-visible,
.trial-cta a:focus-visible,
.pkg-btn:focus-visible,
.toggle-btn:focus-visible,
.faq-item summary:focus-visible,
.final-cta a:focus-visible {
    outline: 3px solid var(--ej-focus);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}