/* =================================================================
   XEKERA HEADER & NAVIGATION STYLES — PCB / RETRO VERSION
   ================================================================= */
:root {
    /* PCB-inspired / Retro Tech palette */
    --x-dark: #081712;         /* Very dark PCB green (Main Header) */
    --x-dark-light: #0f2a1f;   /* Dropdown panels */
    --x-hover: #143726;        /* Hover state green */
    --x-blue: #D4AF37;         /* Gold trace accent (primary brand color) */
    --x-blue-hover: #b58f2c;   /* Darker gold */
    --x-text: #E6F2EA;         /* Soft white-green text */
    --x-text-muted: #9BB0A1;   /* Muted greenish-gray */
    --x-border: #133a2b;       /* Border green */
    --x-accent: #29FF41;       /* Retro CRT green */
}

/* =================================================================
   HERO SECTION STYLES
   ================================================================= */

.hero {
    /* Responsive height to fit cards */
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;

    /* Background Setup */
    background-color: var(--x-dark);
    /* Ensure background image is there if video fails */
    background-image: url(/assets/img/hero.png);
    background-size: cover;
    background-position: center;

    /* Center Content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- 1. BACKGROUND VIDEO & OVERLAY --- */
.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Retro dark overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 20, 14, 0.78); /* Deep PCB green overlay */
    z-index: 1;
}

/* --- 2. WRAPPER & TEXT --- */
.hero-wraper {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-text-content {
    text-align: center;
    margin-bottom: 60px; /* Space between text and cards */
    max-width: 900px;
}

/* Typography */
.hero h1 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 auto 24px auto;
    color: var(--x-text);
    text-shadow:
        0 0 8px rgba(41, 255, 65, 0.25),
        0 10px 30px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 18px;
    font-weight: 400;
    color: var(--x-text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 3. HERO BUTTONS (Top) --- */
.hero-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.hero button {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

/* Gold Button */
.btn-hero-blue {
    background-color: var(--x-blue);
    border: 1px solid var(--x-blue);
    color: var(--x-dark);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}
.btn-hero-blue:hover {
    background-color: var(--x-blue-hover);
    transform: translateY(-2px);
}

/* Dark/Glass Button */
.btn-hero-dark {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--x-text);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 12px rgba(29, 255, 88, 0.08);
}
.btn-hero-dark:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* =================================================================
   PRICING CARDS STYLES — PCB / DARK THEME VERSION
   ================================================================= */

.hero-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* Base Card Style - Dark Glass PCB Panel */
.pricing-card {
    /* Glassy Dark Green Background */
    background: rgba(15, 42, 31, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Green Border (Circuit Trace look) */
    border: 1px solid var(--x-border);
    border-radius: 6px;

    padding: 35px 20px 30px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;

    /* Shadow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: var(--x-hover);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.1); /* Subtle Gold Glow */
}

/* --- FEATURED CARD (Gold Accent) --- */
.featured-card {
    border: 1px solid var(--x-blue); /* Gold Border */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

/* --- BADGES (Gold Plated) --- */
.card-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);

    background: var(--x-blue); /* Gold Background */
    color: var(--x-dark);      /* Dark Text */
    border: 1px solid #fff;    /* Thin white edge for pop */

    padding: 6px 24px;
    font-weight: 800;
    font-size: 16px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
}

.card-badge-simple {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: var(--x-dark); /* Dark Background */
    border: 1px solid var(--x-blue); /* Gold Border */
    color: var(--x-blue);      /* Gold Text */

    padding: 5px 18px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- ICONS --- */
.card-icon svg {
    /* Use Gold or Light Green for Icons */
    stroke: var(--x-text);
    stroke-width: 1.5;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 5px rgba(41, 255, 65, 0.2)); /* Faint green glow */
}

/* --- TYPOGRAPHY --- */
.pricing-card h3 {
    color: var(--x-text); /* Off-white */
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
    text-shadow: none;
}

.pricing-card .sub-text {
    color: var(--x-blue); /* Gold accent for sub-header */
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    min-height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-card .divider {
    width: 100%;
    height: 1px;
    background: var(--x-border); /* Subtle dark green line */
    margin: 10px 0 20px;
}

.pricing-card .desc {
    color: var(--x-text-muted); /* Muted Grey-Green */
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* --- BUTTONS (Gold/Copper Style) --- */
/* Replacing the Red button with a PCB-Gold button */
.btn-card-red {
    background: transparent;
    border: 1px solid var(--x-blue); /* Gold Border */
    color: var(--x-blue);            /* Gold Text */

    font-weight: 700;
    font-size: 13px;
    padding: 12px 0;
    width: 100%;
    text-decoration: none;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn-card-red:hover {
    background: var(--x-blue);       /* Solid Gold on Hover */
    color: var(--x-dark);            /* Black Text on Hover */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

/* Featured Card Button - Make it solid by default to stand out */
.featured-card .btn-card-red {
    background: var(--x-blue);
    color: var(--x-dark);
}
.featured-card .btn-card-red:hover {
    background: #e6c556; /* Lighter gold */
    transform: translateY(-2px);
}

/* --- RESPONSIVE --- */
@media only screen and (max-width: 992px) {
    .hero h1 { font-size: 42px; }
    .hero-pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-card:last-child { grid-column: span 2; } /* Center last card */
}

@media only screen and (max-width: 768px) {
    .hero { padding-top: 120px; }
    .hero-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .pricing-card:last-child { grid-column: auto; }
}