/*
 * ============================================================
 *  LUXIX — luxix-style.css
 *  BeTheme child theme + Elementor
 * ------------------------------------------------------------
 *  HOW TO USE THIS FILE:
 *  Each section is labeled with what it controls.
 *  Search for a section name to jump to it.
 *  All color values use CSS variables defined in Section 1
 *  so you only need to change colors in ONE place.
 * ============================================================
 */


/* ============================================================
 *  1. BRAND VARIABLES
 *     Change your colors here — they apply everywhere below.
 *     Gold = #C9A84C  |  Dark bg = #0a0a0a  |  Card = #111111
 * ============================================================ */

:root {
    --luxix-bg:           #0a0a0a;    /* main dark background */
    --luxix-bg-card:      #111111;    /* slightly lighter for cards */
    --luxix-bg-section:   #0d0d0d;    /* alternating section bg */
    --luxix-gold:         #C9A84C;    /* primary accent / gold */
    --luxix-gold-dim:     rgba(201, 168, 76, 0.15);  /* gold at low opacity */
    --luxix-gold-border:  rgba(201, 168, 76, 0.25);  /* gold borders */
    --luxix-white:        #ffffff;    /* headings */
    --luxix-muted:        #666666;    /* body text / subtext */
    --luxix-faint:        #333333;    /* borders, dividers */
    --luxix-radius:       10px;       /* default corner radius */
    --luxix-radius-lg:    14px;       /* larger cards */
}


/* ============================================================
 *  2. GLOBAL RESET & BASE
 *     Sets the dark background and default text on every page.
 * ============================================================ */

body {
    background-color: var(--luxix-bg) !important;
    color: var(--luxix-white) !important;
}

/* Make sure Elementor sections don't add a white bg */
.elementor-section,
.elementor-container {
    background-color: transparent;
}


/* ============================================================
 *  3. NAVIGATION / HEADER
 *     Styles the BeTheme top header bar.
 * ============================================================ */

/* Header background */
#Header,
#Header .header_inner,
#Header .top_bar {
    background-color: var(--luxix-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

/* Nav link colors */
#Header .menu > li > a {
    color: #888888 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    transition: color 0.2s ease !important;
}

#Header .menu > li > a:hover,
#Header .menu > li.current-menu-item > a {
    color: var(--luxix-gold) !important;
}

/* Logo text color (if using text logo) */
.nav-logo,
#logo a {
    color: var(--luxix-white) !important;
    font-size: 20px !important;
    letter-spacing: 0.05em !important;
}

/* Header CTA button — "Get this built" */
#Header .nav-cta,
#Header a.button.nav-cta {
    color: var(--luxix-gold) !important;
    border: 1px solid var(--luxix-gold-border) !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    font-size: 13px !important;
    transition: background 0.2s ease !important;
}

#Header .nav-cta:hover {
    background: var(--luxix-gold-dim) !important;
}


/* ============================================================
 *  4. HERO SECTION
 *     The full-height opening section of the homepage.
 * ============================================================ */

/* Hero section background */
.luxix-hero,
.elementor-location-single .luxix-hero {
    background-color: var(--luxix-bg) !important;
    min-height: 100vh;
}

/* Eyebrow label above headline */
.luxix-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--luxix-gold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.luxix-eyebrow::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--luxix-gold);
}

/* Main H1 headline */
.luxix-hero h1,
.luxix-hero .elementor-heading-title {
    font-size: clamp(38px, 6vw, 56px) !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

/* Gold accent text inside headline — wrap in <em> or <span class="gold"> */
.luxix-hero h1 em,
.luxix-hero h1 .gold,
.luxix-hero .elementor-heading-title em {
    color: var(--luxix-gold) !important;
    font-style: normal !important;
}

/* Hero subheadline / paragraph */
.luxix-hero p,
.luxix-hero .elementor-widget-text-editor p {
    font-size: 16px !important;
    color: var(--luxix-muted) !important;
    line-height: 1.7 !important;
    max-width: 520px !important;
}

/* Primary button */
.luxix-btn-primary,
.elementor-button.luxix-btn-primary {
    background-color: var(--luxix-gold) !important;
    color: var(--luxix-bg) !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
}

.luxix-btn-primary:hover {
    opacity: 0.88 !important;
}

/* Ghost / secondary button */
.luxix-btn-ghost,
.elementor-button.luxix-btn-ghost {
    background: transparent !important;
    color: #888888 !important;
    border: 1px solid var(--luxix-faint) !important;
    border-radius: 7px !important;
    padding: 13px 28px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    transition: border-color 0.2s, color 0.2s !important;
    cursor: pointer !important;
}

.luxix-btn-ghost:hover {
    border-color: #555555 !important;
    color: var(--luxix-white) !important;
}


/* ============================================================
 *  5. STATS BAR
 *     The 4-column row of numbers below the hero.
 * ============================================================ */

.luxix-stats-bar {
    background-color: var(--luxix-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 28px 0 !important;
}

/* Each stat number */
.luxix-stat-number {
    font-size: 26px !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

/* Gold part of the stat number (+ % # →) */
.luxix-stat-number .accent,
.luxix-stat-number em {
    color: var(--luxix-gold) !important;
    font-style: normal !important;
}

/* Stat label underneath */
.luxix-stat-label {
    font-size: 12px !important;
    color: #444444 !important;
    letter-spacing: 0.04em !important;
    margin-top: 4px !important;
}

/* Thin divider between stat columns */
.luxix-stats-bar .elementor-column:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
}


/* ============================================================
 *  6. SHOWCASE GRID
 *     The project cards section.
 * ============================================================ */

/* Section background */
.luxix-showcase {
    background-color: var(--luxix-bg-section) !important;
    padding: 80px 0 !important;
}

/* Section eyebrow */
.luxix-section-label {
    font-size: 11px !important;
    color: var(--luxix-gold) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}

/* Section heading */
.luxix-section-heading,
.luxix-showcase h2 {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
}

/* Section subtext */
.luxix-section-sub {
    font-size: 14px !important;
    color: #555555 !important;
    margin-bottom: 48px !important;
}

/* Individual project card */
.luxix-project-card {
    background: var(--luxix-bg-card) !important;
    border: 1px solid var(--luxix-faint) !important;
    border-radius: var(--luxix-radius-lg) !important;
    overflow: hidden !important;
    transition: border-color 0.25s ease !important;
    cursor: pointer !important;
}

.luxix-project-card:hover {
    border-color: var(--luxix-gold-border) !important;
}

/* Industry tag pill on card */
.luxix-industry-tag {
    display: inline-block !important;
    font-size: 11px !important;
    color: var(--luxix-gold) !important;
    border: 1px solid var(--luxix-gold-border) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 10px !important;
}

/* Project name on card */
.luxix-project-card h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    margin-bottom: 6px !important;
}

/* Project one-liner on card */
.luxix-project-card p {
    font-size: 12px !important;
    color: #666666 !important;
    line-height: 1.5 !important;
}

/* Card hover overlay */
.luxix-project-card .card-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
}

.luxix-project-card:hover .card-overlay {
    opacity: 1 !important;
}

.luxix-project-card .card-overlay span {
    font-size: 14px !important;
    color: var(--luxix-gold) !important;
    letter-spacing: 0.06em !important;
}

/* "Live" badge */
.luxix-badge-live {
    background: rgba(201, 168, 76, 0.12) !important;
    color: var(--luxix-gold) !important;
    border: 1px solid var(--luxix-gold-border) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}

/* "Coming Soon" badge */
.luxix-badge-soon {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #555555 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}


/* ============================================================
 *  7. WHY LUXIX — FEATURES SECTION
 * ============================================================ */

.luxix-features {
    background-color: var(--luxix-bg) !important;
    padding: 80px 0 !important;
}

/* Feature card */
.luxix-feature-card {
    background: transparent !important;
    border: 1px solid var(--luxix-faint) !important;
    border-radius: var(--luxix-radius) !important;
    padding: 32px 28px !important;
    transition: border-color 0.2s ease !important;
}

.luxix-feature-card:hover {
    border-color: var(--luxix-gold-border) !important;
}

/* Step number e.g. "01" */
.luxix-feature-num {
    font-size: 11px !important;
    color: var(--luxix-gold) !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 16px !important;
    font-weight: 500 !important;
}

.luxix-feature-card h3 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    margin-bottom: 10px !important;
}

.luxix-feature-card p {
    font-size: 14px !important;
    color: var(--luxix-muted) !important;
    line-height: 1.65 !important;
}


/* ============================================================
 *  8. HOW IT WORKS — STEPS SECTION
 * ============================================================ */

.luxix-steps {
    background-color: var(--luxix-bg-section) !important;
    padding: 80px 0 !important;
}

.luxix-step-num {
    font-size: 72px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.03) !important; /* very faint background number */
    line-height: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.luxix-step-label {
    font-size: 11px !important;
    color: var(--luxix-gold) !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.luxix-steps h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    margin-bottom: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}

.luxix-steps p {
    font-size: 14px !important;
    color: var(--luxix-muted) !important;
    line-height: 1.65 !important;
    position: relative !important;
    z-index: 1 !important;
}


/* ============================================================
 *  9. INDUSTRIES STRIP
 * ============================================================ */

.luxix-industries {
    background-color: var(--luxix-bg-card) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 36px 0 !important;
}

.luxix-industry-item {
    font-size: 13px !important;
    color: #444444 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    transition: color 0.2s ease !important;
    cursor: default !important;
}

.luxix-industry-item:hover {
    color: var(--luxix-gold) !important;
}


/* ============================================================
 *  10. CLOSING CTA SECTION
 * ============================================================ */

.luxix-cta {
    background-color: var(--luxix-bg) !important;
    padding: 100px 0 80px !important;
    text-align: center !important;
}

.luxix-cta h2 {
    font-size: 40px !important;
    font-weight: 500 !important;
    color: var(--luxix-white) !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 16px !important;
}

.luxix-cta p {
    font-size: 15px !important;
    color: var(--luxix-muted) !important;
    margin-bottom: 40px !important;
}


/* ============================================================
 *  11. CONTACT / REQUEST FORM
 *     Styles WPForms to match the dark theme.
 * ============================================================ */

/* Form input fields */
.luxix-form .wpforms-field input,
.luxix-form .wpforms-field textarea,
.luxix-form .wpforms-field select,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="url"],
.wpforms-form textarea,
.wpforms-form select {
    background: #111111 !important;
    border: 1px solid var(--luxix-faint) !important;
    color: #cccccc !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease !important;
}

/* Input focus state */
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    border-color: var(--luxix-gold) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Placeholder text */
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
    color: #444444 !important;
}

/* Form labels */
.wpforms-form label {
    color: #888888 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 6px !important;
}

/* Submit button */
.wpforms-form .wpforms-submit,
.wpforms-form button[type="submit"] {
    background-color: var(--luxix-gold) !important;
    color: var(--luxix-bg) !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 14px 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    width: 100% !important;
    letter-spacing: 0.04em !important;
    transition: opacity 0.2s ease !important;
    cursor: pointer !important;
}

.wpforms-form .wpforms-submit:hover {
    opacity: 0.88 !important;
}


/* ============================================================
 *  12. FOOTER
 * ============================================================ */

#Footer,
footer,
.footer_copy {
    background-color: #080808 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #444444 !important;
}

/* Footer heading columns */
#Footer h4,
footer h4 {
    font-size: 12px !important;
    color: var(--luxix-white) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

/* Footer links */
#Footer a,
footer a {
    color: #444444 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    line-height: 2 !important;
}

#Footer a:hover,
footer a:hover {
    color: var(--luxix-gold) !important;
}

/* Footer bottom bar */
.footer_copy,
.footer-bottom {
    font-size: 12px !important;
    color: #333333 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 20px 0 !important;
}


/* ============================================================
 *  13. ELEMENTOR OVERRIDES
 *     Resets Elementor defaults that conflict with dark theme.
 * ============================================================ */

/* Remove white backgrounds Elementor adds by default */
.elementor-widget-wrap,
.elementor-section.elementor-section-boxed > .elementor-container {
    background-color: transparent !important;
}

/* Elementor heading widget */
.elementor-widget-heading .elementor-heading-title {
    color: var(--luxix-white) !important;
}

/* Elementor text widget */
.elementor-widget-text-editor p {
    color: var(--luxix-muted) !important;
}

/* Elementor divider */
.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--luxix-faint) !important;
}

/* Elementor button widget defaults */
.elementor-button {
    font-family: inherit !important;
}


/* ============================================================
 *  14. RESPONSIVE — MOBILE
 *     Adjustments for screens under 768px.
 * ============================================================ */

@media (max-width: 768px) {

    .luxix-hero h1,
    .luxix-hero .elementor-heading-title {
        font-size: 32px !important;
    }

    .luxix-section-heading,
    .luxix-showcase h2 {
        font-size: 24px !important;
    }

    .luxix-cta h2 {
        font-size: 28px !important;
    }

    .luxix-stats-bar .elementor-column:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .luxix-hero p {
        max-width: 100% !important;
    }

}


/* ============================================================
 *  END OF luxix-style.css
 * ============================================================ */