/**
 * AutomatorsX frontend language
 * Shared visual layer for every public page. Homepage and inner pages use the
 * same red/black palette, soft surfaces, compact labels and card treatment.
 */

/* Shared page rhythm and hero language */
main:not(.ax-home) { background: var(--bg-body); }
.pricing-hero-modern,
.lp-hero,
.cat-header {
    position: relative;
    overflow: hidden;
    padding: 132px 0 68px;
    background: var(--bg-gradient);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.pricing-hero-modern::before,
.lp-hero::before,
.cat-header::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    top: -190px;
    right: -120px;
    border-radius: 50%;
    background: var(--primary-surface);
    pointer-events: none;
}
.pricing-hero-content,
.lp-hero > .container,
.cat-header > .container { position: relative; z-index: 1; }
.pricing-hero-content h1,
.pricing-hero-content .pricing-title,
.lp-hero-title,
.cat-header h1 {
    color: var(--text);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1.04;
}
.pricing-hero-content p,
.pricing-subtitle,
.lp-hero-sub,
.cat-header p { color: var(--text-secondary); }
.hero-badge-modern,
.lp-hero-badge {
    background: var(--primary-surface);
    border-color: var(--primary-glow);
    color: var(--primary);
}
.badge-dot { background: var(--primary); }
.gradient-text,
.lp-hero-title .accent { color: var(--primary); background: none; -webkit-text-fill-color: initial; }
.section-modern,
.pricing-section,
.lp-section { padding: 104px 0; background: var(--bg-body); }
.section-header { max-width: 720px; margin-inline: auto; }
.section-tag,
.section-header .section-tag { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-title { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -.05em; }
.section-desc { color: var(--text-secondary); line-height: 1.7; }

/* Consistent cards across about, contact, affiliate, blog and catalogue pages */
.feature-card-about,
.value-card-about,
.showcase-item,
.tech-showcase,
.contact-form-card,
.contact-info-card,
.contact-faq-card,
.contact-method-card,
.pricing-card,
.benefit-card-modern,
.perk-card-modern,
.audience-card-modern,
.trust-card-modern,
.tutorial-card-modern,
.blog-card,
.path-card,
.cd-card,
.instructor-card,
.cat-filters,
.cat-empty {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.feature-card-about:hover,
.value-card-about:hover,
.showcase-item:hover,
.contact-method-card:hover,
.benefit-card-modern:hover,
.perk-card-modern:hover,
.audience-card-modern:hover,
.tutorial-card-modern:hover,
.blog-card:hover,
.path-card:hover,
.instructor-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.feature-icon-about,
.value-icon-about,
.benefit-icon-modern,
.perk-icon-modern,
.audience-icon-modern,
.contact-method-icon.email,
.tutorial-category-tag { color: var(--primary); background: var(--primary-surface); }

/* Buttons and actions use the homepage's red primary action */
.btn,
.btn-primary,
.btn-contact-submit,
.btn-pricing-modern.featured,
.lp-btn-primary,
.btn-hero-primary,
.btn-cta-large {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-ink);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brutal);
}
.btn:hover,
.btn-primary:hover,
.btn-contact-submit:hover,
.btn-pricing-modern.featured:hover,
.lp-btn-primary:hover,
.btn-hero-primary:hover,
.btn-cta-large:hover { background: var(--primary-hover); color: var(--primary-ink); }
.btn-pricing-modern,
.lp-btn-secondary,
.btn-hero-secondary,
.btn-cta-outline { border-radius: var(--radius-md); border-color: var(--border); color: var(--text); background: var(--surface-2); }
.btn-pricing-modern:hover,
.lp-btn-secondary:hover,
.btn-hero-secondary:hover,
.btn-cta-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--surface-1); }

/* Catalogue, paths and detail pages */
.cat-header { text-align: left; padding-bottom: 52px; }
.cat-layout { padding-top: 40px; }
.cat-filters { padding: 20px; }
.cat-filter-group a.active { background: var(--primary-surface); color: var(--primary); }
.cat-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.cat-searchbar input,
.cat-sort select,
.form-input-modern,
.form-textarea-modern,
input, select, textarea { border-color: var(--border); border-radius: var(--radius-md); }
.cat-searchbar input:focus,
.form-input-modern:focus,
.form-textarea-modern:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.cat-pages a.active { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.path-card { color: var(--text); }
.path-card h2, .path-card h3, .cd-card h2, .cd-card h3 { color: var(--text); }
.cd-hero { background: var(--bg-gradient); padding: 72px 0 64px; }
.cd-buybox { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.cd-section h2 { font-size: 1.45rem; letter-spacing: -.035em; }
.cd-curriculum, .cd-review-form { border-radius: var(--radius-lg); }

/* Forms, alerts and tables */
.form-group-modern label { color: var(--text); }
.form-group-modern label i { color: var(--primary); }
.alert-modern.alert-success { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.alert-modern.alert-error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
table { border-color: var(--border); }
table th { background: var(--surface-1); color: var(--text); }
table td { border-color: var(--border-light); color: var(--text-secondary); }

/* Dark CTA blocks remain black with high-contrast white copy */
.about-cta,
.affiliate-cta-modern,
.lp-cta,
.cta-section { background: var(--secondary); color: var(--surface-2); border-radius: var(--radius-lg); }
.about-cta h2,
.affiliate-cta-modern h2,
.lp-cta h2,
.cta-section h2 { color: var(--surface-2); }
.about-cta p,
.affiliate-cta-modern p,
.lp-cta p,
.cta-section p { color: var(--surface-2); opacity: .78; }

/* Instructor profile metadata and social links */
.instructor-profile-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-secondary); }
.instructor-profile-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.instructor-profile-meta > span strong { color: var(--text); }
.instructor-social { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-secondary); background: var(--surface-2); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
.instructor-social:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-surface); transform: translateY(-2px); }
.instructor-social i { font-size: 13px; line-height: 1; }
.instructor-social .fa-x-twitter::before { content: '𝕏'; font-family: var(--font-sans); font-weight: 900; }

@media (max-width: 768px) {
    .pricing-hero-modern, .lp-hero, .cat-header { padding: 108px 0 48px; }
    .section-modern, .pricing-section, .lp-section { padding: 72px 0; }
    .pricing-hero-content h1, .pricing-hero-content .pricing-title, .lp-hero-title, .cat-header h1 { font-size: clamp(2rem, 10vw, 3rem); }
}