/* ==========================================================
   AuTuL Gaming HUB - HOME HEADER V3 (HAMBURGER + LIGHTNING)
   ========================================================== */

/* 1. NAVY BLUE TEXT BAN - FORCES ALL BLUE TEXT TO GOLD/CYAN */
*, a, .entry-title a, .site-title a, .widget-title {
    color: #ffcc00 !important; 
    text-decoration: none !important;
}

p, span, div, .entry-content, .entry-meta {
    color: #ffffff !important; 
}

/* 2. HEADER: UNIVERSAL COMPACT RESPONSIVE NAVBAR */
.home .site-header {
    background: linear-gradient(180deg, rgba(5, 12, 26, 0.98), rgba(8, 18, 36, 0.98)) !important;
    border-bottom: 2px solid rgba(0, 198, 255, 0.90) !important;
    box-shadow: 0 0 16px rgba(0, 190, 255, 0.24) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

.home .custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.home .custom-logo {
    display: block !important;
    max-width: 56px !important;
    height: auto !important;
    margin: 0 !important;
    animation: constantLightning 0.5s infinite alternate ease-in-out !important;
}

@keyframes constantLightning {
    0% { filter: drop-shadow(0 0 5px #ffcc00); transform: scale(1); }
    50% { filter: drop-shadow(0 0 25px #00e5ff) drop-shadow(0 0 45px #00a8ff) contrast(1.3); transform: scale(1.02); }
    100% { filter: drop-shadow(0 0 8px #ffcc00); transform: scale(1); }
}

/* 4. TITLE: GOLDEN GLOW */
.home .site-title a {
    font-size: clamp(30px, 8vw, 52px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #ffcc00 !important;
    text-shadow: 0 0 20px rgba(255, 204, 0, 0.8) !important;
    letter-spacing: 2px !important;
    display: block !important;
}

/* 5. HAMBURGER MENU (CLEAN & ORGANIZED) */
.home .menu-toggle {
    display: block !important; /* Brought back the button */
    background: #0f172a !important;
    color: #00e5ff !important;
    border: 2px solid #00a8ff !important;
    padding: 12px 35px !important;
    margin-top: 25px !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.4) !important;
    cursor: pointer !important;
}

.home .main-navigation ul {
    display: none !important; /* Hidden until clicked */
    background: #0f172a !important;
    border: 2px solid #ffcc00 !important;
    padding: 20px !important;
    margin-top: 15px !important;
    border-radius: 12px !important;
    list-style: none !important;
    width: 260px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}

/* This triggers when the button is clicked */
.home .main-navigation.toggled ul {
    display: block !important;
}

.home .main-navigation li a {
    color: #fff !important;
    padding: 12px 0 !important;
    display: block !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.1) !important;
}

.home .main-navigation li a:hover {
    color: #ffcc00 !important;
}

.home .site-footer {
    margin-top: 60px !important;
    padding: 24px 0 32px !important;
    border-top: 1px solid rgba(0, 168, 255, 0.25) !important;
    background: linear-gradient(180deg, rgba(5, 10, 21, 0.95), rgba(10, 25, 47, 0.95)) !important;
}

.home .footer-container {
    width: 92% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.home .footer-branding {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.home .footer-logo {
    width: 64px !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.home .footer-title {
    color: #ffcc00 !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

.home .footer-tagline,
.home .copyright-text {
    margin: 0 !important;
    color: #ffffff !important;
}
/* ==========================================================
   AUTULONIYO ADVANCED HOMEPAGE STYLING (APPEND-ONLY)
   Preserves original lines 1-142 above without modification.
   ========================================================== */

html,
body.home {
    background-color: #050a15 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
}

.home *,
.home a,
.home button {
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Background Cosmic Nebula & Stars on Homepage */
.home .autul-space-bg {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 20% 18%, rgba(0, 229, 255, 0.14), transparent 38%),
        radial-gradient(circle at 82% 24%, rgba(255, 204, 0, 0.10), transparent 36%),
        linear-gradient(180deg, rgba(5, 10, 21, var(--autul-home-bg-dim-top, 0.88)) 0%, rgba(7, 15, 32, var(--autul-home-bg-dim-mid, 0.94)) 55%, rgba(4, 8, 18, var(--autul-home-bg-dim-bot, 0.98)) 100%),
        var(--autul-home-bg-image, url('Assets/bg/uc-city.jpg')) center center / cover no-repeat !important;
    background-attachment: fixed !important;
}

.home #page,
.home .autul-home-main,
.home .site-footer {
    position: relative !important;
    z-index: 1 !important;
}

.home .site-header,
.site-header,
#masthead {
    position: relative !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

.home .mobile-nav {
    display: none !important;
}

/* ==========================================================
   KILL THE UPPER-LEFT UNSTYLED GARBAGE BUTTONS & TEXT
   Completely contains and hides the slide drawer off-screen
   until the mobile hamburger ☰ button is clicked.
   ========================================================== */
.home #autul-shop-drawer,
.home .autul-shop-drawer {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 86vw) !important;
    height: 100vh !important;
    transform: translateX(-110%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 100002 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

.home #autul-shop-drawer.is-open,
.home .autul-shop-drawer.is-open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.home .autul-shop-drawer-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(3, 8, 18, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100001 !important;
}

.home .autul-shop-drawer-backdrop.is-open {
    display: block !important;
}

.home .autul-shop-drawer-shell {
    height: 100% !important;
    padding: 24px 18px 120px !important;
    background:
        radial-gradient(circle at top left, rgba(0, 229, 255, 0.2), transparent 38%),
        radial-gradient(circle at bottom left, rgba(255, 204, 0, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(8, 17, 32, 0.99), rgba(4, 8, 18, 0.99)) !important;
    border-right: 1px solid rgba(79, 226, 255, 0.32) !important;
    box-shadow: 14px 0 36px rgba(0, 0, 0, 0.5) !important;
    overflow-y: auto !important;
}

.home .autul-shop-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
}

.home .autul-shop-drawer-title {
    margin: 0 !important;
    color: #ffcc00 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.home .autul-shop-drawer-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(79, 226, 255, 0.32) !important;
    background: rgba(16, 27, 47, 0.92) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.home .autul-shop-drawer-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.home .autul-shop-drawer-nav li {
    margin: 0 !important;
    list-style: none !important;
}

.home .autul-shop-drawer-nav a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: rgba(16, 29, 52, 0.88) !important;
    border: 1px solid rgba(79, 226, 255, 0.28) !important;
    color: #f2faff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ==========================================================
   HEADER ACTIONS: GAMING HUB & USER AVATAR (DESKTOP + MOBILE)
   Desktop: OG Branding on left (Title Line 1, Tagline Line 2 indented 68px),
            Gaming HUB pill + User Avatar on right
   Mobile: Hamburger on left, Centered branding in middle, User Avatar on right
   ========================================================== */

/* Shared Header Actions container */
.home .autul-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

/* Gaming HUB Pill Button */
.home .autul-header-shop-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 22px !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(25, 48, 82, 0.96), rgba(11, 22, 40, 0.98)) !important;
    border: 1.5px solid rgba(0, 229, 255, 0.65) !important;
    color: #e6f9ff !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.home .autul-header-shop-btn:hover {
    border-color: #00e5ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.45) !important;
    color: #ffffff !important;
}

/* User Profile Avatar / Placeholder Button */
.home .autul-header-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255, 204, 0, 0.65) !important;
    background: linear-gradient(135deg, rgba(46, 36, 12, 0.96), rgba(22, 17, 6, 0.98)) !important;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    color: #ffcc00 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.home .autul-header-user-btn:hover {
    border-color: #ffcc00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 0 24px rgba(255, 204, 0, 0.45) !important;
}

.home .autul-header-user-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

.home .autul-header-user-blank-icon,
.home svg.autul-header-user-blank-icon {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    color: #ffcc00 !important;
    display: block !important;
}

/* ==========================================================
   DESKTOP VIEWPORT SPECIFIC (min-width: 901px) - FAITHFUL TO OG
   ========================================================== */
@media screen and (min-width: 901px) {
    .home .site-header {
        display: grid !important;
        grid-template-columns: minmax(260px, max-content) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 34px !important;
        padding: 8px 32px 7px !important;
        text-align: left !important;
        background: linear-gradient(90deg, #050a15, #0a192f) !important;
        border-bottom: 2px solid #00a8ff !important;
        box-shadow: 0 0 15px rgba(0, 168, 255, 0.3) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .home .site-branding {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px 12px !important;
        width: auto !important;
        max-width: max-content !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .home .custom-logo-link {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .home .custom-logo {
        max-width: 56px !important;
        height: auto !important;
        margin: 0 !important;
    }

    .home .site-title {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .home .site-title a {
        display: block !important;
        font-size: clamp(20px, 1.55vw, 28px) !important;
        line-height: 1 !important;
        letter-spacing: 0.04em !important;
        word-spacing: 0.1em !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    /* Tagline on Line 2 indented by 68px directly under the title */
    .home .site-description {
        width: 100% !important;
        margin: -2px 0 0 68px !important;
        font-size: 10px !important;
        line-height: 1.08 !important;
        text-align: left !important;
        color: rgba(220, 240, 255, 0.85) !important;
        letter-spacing: 0.4px !important;
    }

    .home .autul-header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px !important;
        margin-left: auto !important;
    }

    /* Hide drawer toggle, drawer, and default WP navigation on desktop homepage */
    .home .autul-shop-drawer-toggle,
    .home .menu-toggle,
    .home .main-navigation,
    .home #site-navigation,
    .home #autul-shop-drawer,
    .home .autul-shop-drawer,
    .home .autul-shop-drawer-backdrop {
        display: none !important;
    }
}

/* ==========================================================
   MOBILE VIEWPORT SPECIFIC (max-width: 900px)
   ========================================================== */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .home .site-header {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px !important;
        align-items: center !important;
        column-gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 56px !important;
        height: auto !important;
        padding: 6px 12px !important;
        margin: 0 !important;
        background: linear-gradient(180deg, rgba(5, 12, 26, 0.98), rgba(8, 18, 36, 0.98)) !important;
        border-bottom: 2px solid rgba(0, 198, 255, 0.90) !important;
        box-shadow: 0 0 16px rgba(0, 190, 255, 0.24) !important;
        box-sizing: border-box !important;
    }

    /* Left hamburger button */
    .home .autul-shop-drawer-toggle {
        grid-column: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 4px !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(79, 226, 255, 0.42) !important;
        background: rgba(14, 28, 52, 0.94) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.24) !important;
        cursor: pointer !important;
        z-index: 10 !important;
        margin: 0 !important;
        position: relative !important;
    }

    .home .autul-shop-drawer-toggle span {
        display: block !important;
        width: 18px !important;
        height: 2.2px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, #ffffff, #6deaff) !important;
        pointer-events: none !important;
    }

    .home .menu-toggle {
        display: none !important;
    }

    /* Center branding */
    .home .site-branding {
        grid-column: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 2px 8px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .home .custom-logo {
        display: block !important;
        max-width: 32px !important;
        max-height: 32px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        animation: constantLightning 0.5s infinite alternate ease-in-out !important;
    }

    .home .site-title {
        margin: 0 !important;
        line-height: 1 !important;
    }

    .home .site-title a {
        font-size: clamp(15px, 4.2vw, 18px) !important;
        letter-spacing: 0.03em !important;
        word-spacing: 0.05em !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        color: #ffcc00 !important;
        text-shadow: 0 0 12px rgba(255, 204, 0, 0.45) !important;
        font-weight: 800 !important;
        text-transform: none !important;
    }
    .home .site-title a::before {
        display: none !important;
        content: none !important;
    }

    .home .site-description {
        margin: 2px auto 0 !important;
        font-size: clamp(8px, 2.3vw, 10px) !important;
        line-height: 1.1 !important;
        color: rgba(230, 246, 255, 0.88) !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Right actions on Mobile */
    .home .autul-header-actions {
        grid-column: 3 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 !important;
    }

    /* Hide Gaming HUB text button on mobile header */
    .home .autul-header-shop-btn {
        display: none !important;
    }

    /* Mobile user button */
    .home .autul-header-user-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .home .main-navigation {
        display: none !important;
    }
}

/* ==========================================================
   OFF-CANVAS SLIDE-IN DRAWER STYLES
   ========================================================== */
.home #autul-shop-drawer,
.home .autul-shop-drawer {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 86vw) !important;
    height: 100vh !important;
    transform: translateX(-110%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 100005 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: none;
}

.home #autul-shop-drawer.is-open,
.home .autul-shop-drawer.is-open {
    display: block !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

.home .autul-shop-drawer-backdrop {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(3, 8, 18, 0.76) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100004 !important;
    pointer-events: none;
}

.home .autul-shop-drawer-backdrop.is-open {
    display: block !important;
    pointer-events: auto !important;
}

.home .autul-shop-drawer-shell {
    height: 100% !important;
    padding: 24px 18px 120px !important;
    background:
        radial-gradient(circle at top left, rgba(0, 229, 255, 0.2), transparent 38%),
        radial-gradient(circle at bottom left, rgba(255, 204, 0, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(8, 17, 32, 0.99), rgba(4, 8, 18, 0.99)) !important;
    border-right: 1px solid rgba(79, 226, 255, 0.32) !important;
    box-shadow: 14px 0 36px rgba(0, 0, 0, 0.6) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.home .autul-shop-drawer-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
}

.home .autul-shop-drawer-title {
    margin: 0 !important;
    color: #ffcc00 !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.home .autul-shop-drawer-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(79, 226, 255, 0.32) !important;
    background: rgba(16, 27, 47, 0.92) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.home .autul-shop-drawer-close:hover {
    background: rgba(0, 229, 255, 0.2) !important;
    border-color: #00e5ff !important;
}

.home .autul-drawer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.home .autul-drawer-links li {
    margin: 0 !important;
    list-style: none !important;
}

.home .autul-drawer-links a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    border-radius: 14px !important;
    background: rgba(16, 29, 52, 0.88) !important;
    border: 1px solid rgba(79, 226, 255, 0.28) !important;
    color: #f2faff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
    text-decoration: none !important;
}

.home .autul-drawer-links a:hover,
.home .autul-drawer-links a.autul-drawer-highlight {
    background: linear-gradient(135deg, rgba(22, 45, 80, 0.96), rgba(12, 24, 44, 0.98)) !important;
    border-color: #00e5ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3) !important;
}

/* ==========================================================
   HOMEPAGE MAIN & HERO SECTION
   ========================================================== */
.home .autul-home-main {
    width: 100% !important;
    padding: 24px 16px 20px !important;
}

.home .autul-home-shell {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.home .autul-home-hero {
    background: linear-gradient(165deg, rgba(10, 22, 44, 0.92) 0%, rgba(7, 14, 29, 0.96) 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.34) !important;
    border-radius: 22px !important;
    padding: clamp(20px, 3.5vw, 32px) !important;
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(0, 168, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Hero Top: Timed Collapse Welcome Kicker & Tagline (Butter-Smooth Crisp Glow Edition) */
.home .autul-home-hero-top {
    text-align: center !important;
    max-width: 880px !important;
    margin: 0 auto 16px; /* No !important: enables silky smooth margin transition */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    will-change: height, margin, opacity;
    transition: height 0.48s cubic-bezier(0.25, 1, 0.5, 1), margin 0.48s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
}

/* Sentence 1 & Sentence 2: Butter-Smooth Zero-Stutter Grid Drawer Collapse */
.home .autul-home-hero-top {
    display: grid !important;
    grid-template-rows: 1fr !important;
    margin: 0 auto 16px !important;
    padding: 0 !important;
    max-width: 880px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    will-change: grid-template-rows, margin-bottom, opacity;
    transition: grid-template-rows 0.75s cubic-bezier(0.25, 1, 0.5, 1), margin-bottom 0.75s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease !important;
}

@media (max-width: 900px) {
    .home .autul-home-hero-top {
        margin: 0 auto 10px !important;
    }
}

.home .autul-welcome-drawer-inner {
    overflow: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 0 !important;
}

.home .autul-home-hero-top.is-vanishing {
    grid-template-rows: 0fr !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.home .autul-home-hero-top.is-collapsed {
    display: none !important;
    grid-template-rows: 0fr !important;
    margin: 0px !important;
    padding: 0px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.home .autul-home-kicker,
.home .autul-home-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 6px 18px !important;
    border-radius: 999px !important;
    font-size: clamp(11px, 2.8vw, 12.5px) !important;
    font-weight: 800 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    max-width: 95vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    will-change: opacity, transform;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 600px) {
    .home .autul-home-kicker,
    .home .autul-home-title {
        font-size: 10.5px !important;
        letter-spacing: 0.8px !important;
        padding: 5px 14px !important;
        white-space: normal !important;
    }
}

/* Sentence 1 (Kicker Pill: Crisp Neon Cyan) */
.home .autul-home-kicker {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    color: #7eeeff !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.22) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6) !important;
}

.home .autul-home-kicker.is-exiting {
    opacity: 0 !important;
    transform: translateY(-5px) scale(0.98) !important;
    pointer-events: none !important;
}

.home .autul-home-kicker.is-collapsed {
    display: none !important;
}

/* Sentence 2 (Title Pill: Radiant Gold, 100% Matching Geometry) */
.home .autul-home-title {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 204, 0, 0.45) !important;
    color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.22) !important;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    opacity: 0;
    transform: translateY(6px);
}

.home .autul-home-title.is-visible {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.home .autul-home-title.is-exiting {
    opacity: 0 !important;
    transform: translateY(-5px) scale(0.98) !important;
    pointer-events: none !important;
}

.home .autul-home-title.is-collapsed {
    display: none !important;
}

.home #autul-home-founder,
.home .autul-home-founder-card,
.home #autul-home-founder-section {
    scroll-margin-top: 18px !important;
}

.home .autul-home-founder-grid {
    display: grid !important;
    grid-template-columns: 1.48fr 1fr !important;
    gap: 20px !important;
    align-items: stretch !important;
}

.home .autul-home-founder-card,
.home .autul-home-purpose-card {
    background: rgba(12, 25, 48, 0.82) !important;
    border: 1px solid rgba(0, 229, 255, 0.24) !important;
    border-radius: 18px !important;
    padding: clamp(18px, 2.6vw, 24px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================
   PROMINENT FOUNDER PHOTO SLOT (NEON GLASS FRAME)
   ========================================================== */
.home .autul-home-founder-inner {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
}

.home .autul-home-founder-photo-slot {
    flex: 0 0 130px !important;
    width: 130px !important;
}

.home .autul-home-founder-photo-frame {
    width: 130px !important;
    height: 146px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(0, 229, 255, 0.65) !important;
    box-shadow:
        0 0 20px rgba(0, 229, 255, 0.32),
        inset 0 0 14px rgba(0, 229, 255, 0.15) !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #0d2242, #071328) !important;
    position: relative !important;
}

.home .autul-home-founder-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.home .autul-home-founder-photo-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 8px !important;
    gap: 4px !important;
    background: linear-gradient(180deg, rgba(16, 36, 68, 0.95), rgba(7, 18, 36, 0.98)) !important;
}

.home .autul-home-founder-photo-icon svg {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)) !important;
}

.home .autul-home-founder-photo-tag {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #ffcc00 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.home .autul-home-founder-photo-note {
    font-size: 8.5px !important;
    color: rgba(200, 235, 255, 0.72) !important;
    line-height: 1.15 !important;
}

.home .autul-home-founder-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.home .autul-home-section-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #00e5ff !important;
    margin-bottom: 6px !important;
}

.home .autul-home-founder-name {
    margin: 0 0 10px !important;
    font-size: clamp(20px, 2.6vw, 25px) !important;
    font-weight: 900 !important;
    color: #ffcc00 !important;
    line-height: 1.25 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.home .autul-home-founder-aka {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #9beeff !important;
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.32) !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
}

.home .autul-home-role-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
}

.home .autul-home-role-pill {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: rgba(6, 15, 30, 0.85) !important;
    border: 1px solid rgba(255, 204, 0, 0.28) !important;
    color: #ffe380 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.home .autul-home-story,
.home .autul-home-purpose-text {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.62 !important;
    color: rgba(240, 248, 255, 0.94) !important;
}

.home .autul-home-purpose-title {
    margin: 0 0 8px !important;
    font-size: clamp(17px, 2.3vw, 21px) !important;
    font-weight: 800 !important;
    color: #ffcc00 !important;
    line-height: 1.3 !important;
}

.home .autul-home-purpose-highlights {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 14px 0 !important;
}

.home .autul-home-mini-stat {
    background: rgba(5, 12, 24, 0.78) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    border-radius: 12px !important;
    padding: 9px 11px !important;
}

.home .autul-home-mini-stat-label {
    display: block !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #8cebff !important;
    margin-bottom: 2px !important;
}

.home .autul-home-mini-stat-value {
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffcc00 !important;
}

.home .autul-home-quick-jump {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    margin-top: auto !important;
}

.home .autul-home-jump-link,
.home .autul-home-jump-shop {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.home .autul-home-jump-link {
    background: rgba(0, 229, 255, 0.14) !important;
    border: 1px solid rgba(0, 229, 255, 0.48) !important;
    color: #9beeff !important;
}

.home .autul-home-jump-shop {
    background: linear-gradient(135deg, #ffcc00 0%, #ffaa00 100%) !important;
    border: 1px solid #ffd84d !important;
    color: #06101e !important;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.32) !important;
}

/* ==========================================================
   CATEGORY PICTURE SLOTS IN SEGMENTS HUB
   ========================================================== */
.home .autul-home-segments {
    background: linear-gradient(180deg, rgba(8, 17, 34, 0.88) 0%, rgba(5, 11, 24, 0.94) 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.28) !important;
    border-radius: 22px !important;
    padding: 16px 20px 22px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.50) !important;
}

.home .autul-home-segments-header {
    text-align: center !important;
    max-width: 760px !important;
    margin: 0 auto 10px !important;
}

.home .autul-home-segments-title {
    margin: 0 0 4px !important;
    font-size: clamp(16px, 2.5vw, 24px) !important;
    font-weight: 900 !important;
    color: #ffcc00 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.home .autul-home-segments-sub {
    margin: 0 !important;
    font-size: 14px !important;
    color: rgba(226, 242, 255, 0.88) !important;
}

.home .autul-home-segment-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
}

.home .autul-home-segment-card {
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease !important;
}

.home .autul-home-segment-live {
    background: linear-gradient(155deg, rgba(12, 31, 61, 0.95) 0%, rgba(7, 17, 36, 0.98) 100%) !important;
    border: 2px solid rgba(0, 229, 255, 0.62) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 229, 255, 0.2) !important;
}

.home .autul-home-segment-upcoming {
    background: linear-gradient(160deg, rgba(10, 20, 39, 0.82) 0%, rgba(6, 12, 25, 0.90) 100%) !important;
    border: 1px dashed rgba(255, 204, 0, 0.36) !important;
}

/* Category Media Frame */
.home .autul-home-segment-media-wrap {
    position: relative !important;
    width: 100% !important;
    height: 130px !important;
    overflow: hidden !important;
    background: #061124 !important;
}

.home .autul-home-segment-banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.home .autul-home-segment-media-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(6, 17, 36, 0.92) 100%) !important;
}

.home .autul-home-segment-media-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 2 !important;
}

.home .autul-home-segment-media-wrap.is-future {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, rgba(12, 24, 46, 0.95), rgba(7, 14, 28, 0.98)) !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.18) !important;
}

.home .autul-home-segment-placeholder-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    color: rgba(255, 204, 0, 0.5) !important;
}

.home .autul-home-segment-placeholder-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    color: #ffcc00 !important;
}

.home .autul-home-segment-placeholder-text {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(200, 235, 255, 0.65) !important;
}

.home .autul-home-segment-body {
    padding: clamp(16px, 2.2vw, 22px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
}

.home .autul-home-status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
}

.home .autul-home-status-badge.is-live {
    background: rgba(16, 185, 129, 0.22) !important;
    border: 1px solid rgba(52, 211, 153, 0.75) !important;
    color: #6ee7b7 !important;
}

.home .autul-home-status-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #34d399 !important;
    box-shadow: 0 0 8px #34d399 !important;
}

.home .autul-home-status-badge.is-upcoming {
    background: rgba(255, 204, 0, 0.14) !important;
    border: 1px solid rgba(255, 204, 0, 0.48) !important;
    color: #ffdd66 !important;
}

.home .autul-home-segment-code {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    color: rgba(185, 245, 255, 0.9) !important;
    text-transform: uppercase !important;
}

.home .autul-home-segment-name {
    margin: 0 0 4px !important;
    font-size: clamp(19px, 2.5vw, 24px) !important;
    font-weight: 900 !important;
    color: #ffcc00 !important;
    line-height: 1.25 !important;
}

.home .autul-home-segment-name a {
    color: #ffcc00 !important;
}

.home .autul-home-segment-tagline {
    margin: 0 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #7eeeff !important;
}

.home .autul-home-segment-badge-row {
    margin-bottom: 12px !important;
}

.home .autul-home-segment-tagline-pill {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.40) !important;
    color: #7eeeff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}

.home .autul-home-segment-lead {
    margin: 0 0 16px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: rgba(235, 246, 255, 0.95) !important;
}

/* ==========================================================
   PERKS SLIDER: EQUIPPED TO LONGEST SENTENCE & WATER-SMOOTH
   ========================================================== */
.home .autul-home-segment-perks {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    min-height: 84px !important; /* Safety floor for longest sentence */
}

/* All slides occupy identical grid cell so container height NEVER changes */
.home .autul-home-segment-perks li.autul-perk-slide,
.home .autul-home-segment-perks li {
    grid-area: 1 / 1 / 2 / 2 !important;
    display: flex !important;
    align-items: center !important; /* Vertically centered for smaller sentences */
    justify-content: flex-start !important;
    gap: 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(220, 240, 255, 0.95) !important;
    background: rgba(8, 18, 36, 0.78) !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 229, 255, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Sliding animation properties: smooth as water */
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.65s !important;
    will-change: transform, opacity;
}

/* Active Slide: Centered and fully visible */
.home .autul-home-segment-perks li.autul-perk-slide.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    z-index: 2 !important;
}

/* Exiting Slide: Smoothly glides to the left */
.home .autul-home-segment-perks li.autul-perk-slide.is-prev {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-60px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.home .autul-perk-title {
    color: #ffcc00 !important;
    font-weight: 800 !important;
}

.home .autul-perk-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================
   "WHAT IS AUTULONIYO" BUTTON & 1-SECOND SPLASH LIGHT EFFECT
   ========================================================== */
.home .autul-what-is-btn {
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.home .autul-what-is-btn:hover {
    background: rgba(0, 229, 255, 0.22) !important;
    border-color: #00e5ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* 1-second splash light on founder card */
@keyframes autulFounderSplashLight {
    0% {
        box-shadow: 0 0 0px rgba(0, 229, 255, 0);
        border-color: rgba(0, 229, 255, 0.24);
    }
    25% {
        box-shadow:
            0 0 45px rgba(0, 229, 255, 0.95),
            0 0 85px rgba(255, 204, 0, 0.65),
            inset 0 0 30px rgba(0, 229, 255, 0.35) !important;
        border-color: #00e5ff !important;
        transform: scale(1.015) !important;
    }
    60% {
        box-shadow:
            0 0 30px rgba(0, 229, 255, 0.7),
            0 0 55px rgba(255, 204, 0, 0.45),
            inset 0 0 15px rgba(0, 229, 255, 0.2) !important;
        border-color: rgba(0, 229, 255, 0.8) !important;
        transform: scale(1.008) !important;
    }
    100% {
        box-shadow: 0 0 0px rgba(0, 229, 255, 0);
        border-color: rgba(0, 229, 255, 0.24);
        transform: scale(1);
    }
}

.home .autul-home-founder-card.autul-splash-active {
    animation: autulFounderSplashLight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    z-index: 10 !important;
    position: relative !important;
}


/* ==========================================================
   GAME CHIPS & ACTION BUTTONS: BALANCED AIRY SPACING
   ========================================================== */
.home .autul-home-segment-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    margin-top: 14px !important;
    margin-bottom: 20px !important; /* Clean generous breathing room before action buttons */
    align-items: center !important;
}

.home .autul-home-game-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 13px !important;
    border-radius: 9px !important;
    background: rgba(6, 16, 34, 0.90) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #d8f8ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.home a.autul-home-game-chip:hover {
    border-color: #ffcc00 !important;
    color: #ffcc00 !important;
    background: rgba(16, 32, 60, 0.95) !important;
    box-shadow: 0 0 12px rgba(255, 204, 0, 0.35) !important;
    transform: translateY(-1px) !important;
}

.home .autul-home-segment-actions {
    display: grid !important;
    grid-template-columns: 1.25fr 1fr !important;
    gap: 12px !important;
    margin-top: auto !important;
    align-items: stretch !important;
}

.home .autul-home-cta-primary,
.home .autul-home-cta-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.home .autul-home-cta-primary {
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%) !important;
    color: #050c18 !important;
    border: 1px solid #ffe066 !important;
    box-shadow: 0 8px 22px rgba(255, 204, 0, 0.32) !important;
    transition: all 0.2s ease !important;
}

.home .autul-home-cta-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.45) !important;
}

.home .autul-home-cta-secondary {
    background: rgba(0, 229, 255, 0.12) !important;
    color: #9beeff !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    transition: all 0.2s ease !important;
}

.home .autul-home-cta-secondary:hover {
    background: rgba(0, 229, 255, 0.22) !important;
    border-color: #00e5ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.45) !important;
    transform: translateY(-2px) !important;
}


.home .autul-home-segment-footer-note {
    margin-top: auto !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    background: rgba(5, 11, 22, 0.72) !important;
    border: 1px solid rgba(255, 204, 0, 0.22) !important;
    color: rgba(255, 225, 130, 0.90) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Core Values Strip */
.home .autul-home-pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
}

.home .autul-home-pillar-item {
    background: rgba(9, 19, 38, 0.82) !important;
    border: 1px solid rgba(0, 229, 255, 0.22) !important;
    border-radius: 16px !important;
    padding: 15px 16px !important;
}

.home .autul-home-pillar-title {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffcc00 !important;
    margin-bottom: 5px !important;
}

.home .autul-home-pillar-text {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(230, 244, 255, 0.88) !important;
}

.home .autul-home-inline-link {
    color: #00e5ff !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}

@media (hover: hover) and (pointer: fine) {
    .home .autul-home-cta-primary:hover,
    .home .autul-home-cta-secondary:hover,
    .home .autul-home-jump-link:hover,
    .home .autul-home-jump-shop:hover {
        transform: translateY(-2px) !important;
    }
}

/* Responsive Tablet & Mobile Adjustments */
@media (max-width: 980px) {
    .home .autul-home-founder-grid,
    .home .autul-home-segment-grid,
    .home .autul-home-pillars {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .home .autul-home-founder-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .home .autul-home-founder-photo-slot {
        margin: 0 auto 10px !important;
    }

    .home .autul-home-founder-name {
        justify-content: center !important;
    }

    .home .autul-home-role-pills {
        justify-content: center !important;
    }

    .home .autul-home-purpose-highlights {
        grid-template-columns: 1fr !important;
    }

    .home .autul-home-quick-jump,
    .home .autul-home-segment-actions { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 4px !important; }

    .home .autul-home-jump-link,
    .home .autul-home-jump-shop,
    .home .autul-home-cta-primary,
    .home .autul-home-cta-secondary {
        width: 100% !important;
        flex: none !important;
    }
}
/* Spacious Mobile Segment Refinements (No Edge-Stretching) */
@media (max-width: 900px) {
    .home .autul-home-segment-card {
        border-radius: 22px !important;
        margin: 0 0 12px 0 !important;
    }

    .home .autul-home-segment-body {
        padding: 24px 20px 22px !important;
    }

    .home .autul-home-segment-name {
        font-size: clamp(21px, 5.2vw, 25px) !important;
        margin-bottom: 8px !important;
    }

    .home .autul-home-segment-lead {
        font-size: 14px !important;
        line-height: 1.68 !important;
        margin-bottom: 16px !important;
    }

    .home .autul-home-segment-perks {
        gap: 10px !important;
        margin-bottom: 18px !important;
    }

    .home .autul-home-segment-perks li {
        padding: 10px 14px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .home .autul-home-segment-chips {
        gap: 8px !important;
        margin-bottom: 18px !important;
    }

    .home .autul-home-game-chip {
        padding: 7px 14px !important;
        border-radius: 999px !important;
        font-size: 12.5px !important;
    }

    .home .autul-home-cta-primary {
        min-height: 48px !important;
        font-size: 14.5px !important;
        border-radius: 14px !important;
    }

    .home .autul-home-cta-secondary {
        min-height: 44px !important;
        font-size: 13.5px !important;
        border-radius: 14px !important;
    }
}
/* ==========================================================
   GAME LOGOS SHOWCASE STRIP (UP TO 10 LOGOS)
   ========================================================== */
.home .autul-home-game-logos-strip {
    position: absolute !important;
    inset: 38px 10px 8px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* PC Desktop Game Logos: 2 Stacks of 3 Logos Each (3x2 Grid) */
@media (min-width: 1025px) {
    .home .autul-home-segment-media-wrap {
        height: 152px !important;
    }

    .home .autul-home-game-logos-strip {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-rows: repeat(2, 42px) !important;
        gap: 8px 10px !important;
        inset: 42px 14px 10px 14px !important;
        align-items: center !important;
        justify-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }

    .home .autul-home-game-logo-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 110px !important;
        height: 42px !important;
        padding: 4px 10px !important;
        border-radius: 9px !important;
        background: rgba(8, 18, 36, 0.90) !important;
        border: 1px solid rgba(0, 229, 255, 0.45) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
        backdrop-filter: blur(6px) !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .home .autul-home-game-logo-badge:hover {
        transform: translateY(-2px) scale(1.06) !important;
        border-color: #ffcc00 !important;
        box-shadow: 0 6px 20px rgba(255, 204, 0, 0.45) !important;
    }

    .home .autul-home-game-logo-img {
        max-height: 30px !important;
        max-width: 82px !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* Mobile & Tablet Android View: Strictly Preserved Untouched */
@media (max-width: 1024px) {
    .home .autul-home-segment-media-wrap {
        height: 130px !important;
    }

    .home .autul-home-game-logos-strip {
        position: absolute !important;
        inset: 38px 10px 8px 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }

    .home .autul-home-game-logo-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        height: 32px !important;
        padding: 3px 9px !important;
        border-radius: 8px !important;
        background: rgba(8, 18, 36, 0.88) !important;
        border: 1px solid rgba(0, 229, 255, 0.45) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
        backdrop-filter: blur(6px) !important;
        pointer-events: auto !important;
        transition: transform 0.2s ease, border-color 0.2s ease !important;
    }

    .home .autul-home-game-logo-badge:hover {
        transform: translateY(-2px) scale(1.04) !important;
        border-color: #ffcc00 !important;
        box-shadow: 0 6px 18px rgba(255, 204, 0, 0.35) !important;
    }

    .home .autul-home-game-logo-img {
        max-height: 22px !important;
        max-width: 52px !important;
        object-fit: contain !important;
        display: block !important;
    }
}

.home .autul-logo-glyph {
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: #ffcc00 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* ==========================================================
   MYSTERY ? QUESTION MARK BACKDROP FOR UPCOMING SEGMENTS
   ========================================================== */
.home .autul-home-mystery-backdrop {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at center, rgba(0, 229, 255, 0.18), transparent 68%),
        linear-gradient(135deg, #09172f 0%, #050c18 100%) !important;
    overflow: hidden !important;
    padding-top: 14px !important;
}

.home .autul-mystery-cyber-grid {
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    opacity: 0.55 !important;
}

.home .autul-mystery-question-mark {
    position: relative !important;
    font-size: 54px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffcc00 !important;
    text-shadow:
        0 0 18px rgba(255, 204, 0, 0.70),
        0 0 36px rgba(0, 229, 255, 0.40) !important;
    margin-bottom: 2px !important;
    animation: mysteryPulse 2.4s infinite alternate ease-in-out !important;
}

@keyframes mysteryPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 6px #ffcc00); }
    100% { transform: scale(1.08); filter: drop-shadow(0 0 16px #00e5ff); }
}

.home .autul-mystery-sub {
    position: relative !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(200, 235, 255, 0.85) !important;
}

/* ==========================================================
   SEGMENT BADGE SPACING & ALIGNMENT FIX (PREVENTS COLLISION)
   ========================================================== */
.home .autul-home-segment-media-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 4 !important;
}

.home .autul-home-status-badge {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 5px 12px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.6px !important;
}

.home .autul-home-segment-code {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 10px !important;
    margin-left: auto !important;
    padding: 3px 9px !important;
    border-radius: 6px !important;
    background: rgba(4, 10, 22, 0.85) !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    letter-spacing: 0.8px !important;
}
/* ==========================================================
   MOBILE REFINEMENTS: HIDE AIO GAMING BADGE OVER LOGOS
   & TIGHTEN SPACING BETWEEN HEADLINE AND SEGMENTS
   ========================================================== */
@media (max-width: 900px) {
    /* 1. Hide the 'AIO GAMING' badge on mobile so it does not overlap game logos */
    .home .autul-home-segment-live .autul-home-segment-code {
        display: none !important;
    }

    /* 2. Tighten vertical gap between hero headline and segments section */
    .home .autul-home-main {
        padding-top: 14px !important;
    }

    .home .autul-home-shell {
        gap: 14px !important;
    }

    .home .autul-home-hero-top {
        margin: 0 auto 6px;
        overflow: hidden !important;
    }

    .home .autul-home-kicker {
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    .home .autul-home-title {
        margin-bottom: 0 !important;
        overflow: hidden !important;
    }

    .home .autul-home-segments {
        padding: 18px 14px 22px !important;
    }

    .home .autul-home-segments-header {
        margin: 0 auto 12px !important;
    }

    .home .autul-home-segments-header .autul-home-section-tag {
        margin-bottom: 3px !important;
    }

    .home .autul-home-segments-title {
        margin: 2px 0 5px !important;
    }

    .home .autul-home-segments-sub {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}
/* ==========================================================
   TIMED COLLAPSE KEYFRAMES (3s Kicker & 7s Title Blip)
   GPU-composited for 60/120fps smoothness across PC, Tab & Mobile
   ========================================================== */

/* 1. Kicker collapses at 3 seconds */
@keyframes autulKickerCollapse {
    0% {
        opacity: 1;
        max-height: 60px;
        transform: translateY(0) scale(1);
        margin-bottom: 10px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    40% {
        opacity: 0.3;
        transform: translateY(-4px) scale(0.96);
    }
    100% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px) scale(0.9);
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@keyframes autulKickerCollapseMobile {
    0% {
        opacity: 1;
        max-height: 60px;
        transform: translateY(0) scale(1);
        margin-bottom: 6px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    40% {
        opacity: 0.3;
        transform: translateY(-4px) scale(0.96);
    }
    100% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px) scale(0.9);
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

/* 2. Headline blip-collapses at 7 seconds */
@keyframes autulTitleBlipCollapse {
    0% {
        opacity: 1;
        max-height: 160px;
        transform: scale(1);
        filter: none;
        margin-bottom: 0;
    }
    15% {
        opacity: 0.35;
        transform: scale(1.02);
        filter: drop-shadow(0 0 14px #00e5ff) contrast(1.4);
    }
    30% {
        opacity: 1;
        transform: scale(0.98);
        filter: drop-shadow(0 0 20px #ffcc00);
    }
    45% {
        opacity: 0.12;
        transform: scale(0.96, 0.6);
        filter: blur(1.5px) drop-shadow(0 0 10px #00e5ff);
    }
    60% {
        opacity: 0;
        transform: scale(0.9, 0.1);
        max-height: 60px;
    }
    100% {
        opacity: 0;
        max-height: 0;
        transform: scale(0, 0);
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        pointer-events: none;
        visibility: hidden;
    }
}

/* 3. Hero top wrapper collapses margin at 7.6s so content slides up seamlessly */
@keyframes autulHeroTopCollapse {
    0% {
        max-height: 240px;
        margin-bottom: 20px;
    }
    100% {
        max-height: 0;
        margin: 0 auto 0 auto;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
    }
}

@keyframes autulHeroTopCollapseMobile {
    0% {
        max-height: 200px;
        margin-bottom: 6px;
    }
    100% {
        max-height: 0;
        margin: 0 auto 0 auto;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
    }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .home .autul-home-kicker,
    .home .autul-home-title,
    .home .autul-home-hero-top {
        animation: none !important;
        opacity: 1 !important;
        max-height: none !important;
        visibility: visible !important;
    }
}
/* ==========================================================
   TIMED COLLAPSE REENFORCEMENT CLASSES (GUARANTEED REMOVAL)
   ========================================================== */
.home .autul-home-kicker.is-collapsed,
.home .autul-home-title.is-collapsed,
.home .autul-home-hero-top.is-collapsed {
    display: none !important;
    max-height: 0px !important;
    height: 0px !important;
    opacity: 0 !important;
    margin: 0px !important;
    padding: 0px !important;
    border: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.home .autul-home-kicker.is-collapsing {
    opacity: 0 !important;
    max-height: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-width: 0px !important;
    transform: scale(0.92) translateY(-10px) !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.home .autul-home-title.is-collapsing {
    opacity: 0 !important;
    max-height: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    transform: scale(0.9, 0) !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.home .autul-home-hero-top.is-collapsing {
    max-height: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding: 0px !important;
    overflow: hidden !important;
}


/* ==========================================================
   MOBILE TAP & SELECTION FIX: PREVENT UNWANTED TEXT HIGHLIGHTING
   ========================================================== */
.home,
.home * {
    -webkit-tap-highlight-color: transparent !important;
}

/* Static, non-interactive text elements cannot be selected or highlighted on tap */
.home .autul-home-segment-desc,
.home .autul-home-segment-lead,
.home .autul-home-segment-perks,
.home .autul-perk-slide,
.home .autul-perk-slide *,
.home .autul-home-kicker,
.home .autul-home-title,
.home .autul-home-segment-tagline-pill,
.home .autul-home-section-tag,
.home .autul-home-status-badge,
.home .autul-home-segment-code,
.home .autul-home-segment-footer-note,
.home .autul-home-founder-card p,
.home .autul-home-purpose-card p,
.home .autul-home-story,
.home .autul-home-purpose-text,
.home .autul-home-mini-stat,
.home .autul-home-role-pills,
.home .autul-home-role-pill,
.home .autul-home-pillar-item,
.home .autul-home-pillar-text,
.home .autul-home-pillar-title {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    cursor: default !important;
}

/* Genuine interactive elements retain pointer cursor and full clickability */
.home a,
.home button,
.home .autul-home-segment-name a,
.home .autul-home-game-chip,
.home .autul-home-cta-primary,
.home .autul-home-cta-secondary,
.home .autul-what-is-btn,
.home .autul-home-jump-link,
.home .autul-home-inline-link,
.home .autul-home-game-logo-badge {
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    pointer-events: auto !important;
}

/* Ensure Game Logo Showcase Strip is fully clickable and interactive */
.home .autul-home-game-logos-strip {
    pointer-events: auto !important;
}

@media (min-width: 1025px) {
    .home .autul-home-game-logo-badge {
        min-width: 58px !important;
        height: 38px !important;
        padding: 4px 11px !important;
        border-radius: 9px !important;
    }
}
@media (max-width: 1024px) {
    .home .autul-home-game-logo-badge {
        min-width: 44px !important;
        height: 32px !important;
        padding: 3px 9px !important;
        border-radius: 8px !important;
    }
}

/* ==========================================================
   INSTANT RENDERING & ANTI-FLICKER HARDWARE ACCELERATION
   ========================================================== */
.home .autul-home-game-logo-img,
.home .autul-home-founder-photo,
.home .autul-home-segment-banner-img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    content-visibility: visible !important;
}

.home .autul-home-game-logo-badge {
    contain: layout paint !important;
}

.home .autul-home-founder-photo-frame {
    contain: strict !important;
}

.home #autul-home-founder-section,
.home #autul-home-founder,
.home .autul-home-founder-card {
    scroll-margin-top: 16px !important;
}

.home .autul-home-trust-callout + .autul-home-segment-actions {
    margin-top: 18px !important;
}


/* ==========================================================
   PROFILE AVATAR DROPDOWN MENU (CLICKS ONLY, ZERO CLUTTER)
   ========================================================== */
.autul-header-profile-menu-wrap,
.home .autul-header-profile-menu-wrap {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
}

.autul-header-profile-trigger,
.home .autul-header-profile-trigger {
	position: relative !important;
	cursor: pointer !important;
	border: 1.5px solid rgba(0, 229, 255, 0.55) !important;
	background: rgba(10, 25, 48, 0.9) !important;
	box-shadow: 0 0 10px rgba(0, 229, 255, 0.25) !important;
	padding: 0 !important;
	border-radius: 50% !important;
	width: 42px !important;
	height: 42px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	transition: all 0.2s ease !important;
}

.autul-header-profile-trigger:hover,
.home .autul-header-profile-trigger:hover,
.autul-header-profile-trigger[aria-expanded="true"],
.home .autul-header-profile-trigger[aria-expanded="true"] {
	border-color: #ffcc00 !important;
	box-shadow: 0 0 16px rgba(255, 204, 0, 0.5) !important;
}

.autul-header-profile-badge-dot,
.home .autul-header-profile-badge-dot {
	position: absolute !important;
	bottom: -1px !important;
	right: -1px !important;
	width: 9px !important;
	height: 9px !important;
	border-radius: 50% !important;
	background: #00ff88 !important;
	border: 1.5px solid #050d1a !important;
	box-shadow: 0 0 6px #00ff88 !important;
}

.autul-header-profile-dropdown,
.home .autul-header-profile-dropdown {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	right: 0 !important;
	width: 220px !important;
	background: linear-gradient(180deg, #09172e 0%, #050d1a 100%) !important;
	border: 1px solid rgba(0, 229, 255, 0.45) !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 229, 255, 0.25) !important;
	padding: 12px !important;
	z-index: 99999 !important;
	display: none;
	box-sizing: border-box !important;
	text-align: left !important;
}

.autul-header-profile-dropdown.is-open,
.home .autul-header-profile-dropdown.is-open {
	display: block !important;
}

.autul-profile-dropdown-meta,
.home .autul-profile-dropdown-meta {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	padding: 4px 6px 10px !important;
	border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
	margin-bottom: 8px !important;
}

.autul-profile-dropdown-tag,
.home .autul-profile-dropdown-tag {
	font-size: 8.5px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em !important;
	color: #00ff88 !important;
	text-transform: uppercase !important;
}

.autul-profile-dropdown-name,
.home .autul-profile-dropdown-name {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.autul-profile-dropdown-links,
.home .autul-profile-dropdown-links {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

.autul-profile-dropdown-links li,
.home .autul-profile-dropdown-links li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.autul-profile-dropdown-links a,
.home .autul-profile-dropdown-links a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	color: #dcf2ff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.18s ease !important;
	background: transparent !important;
	border: none !important;
}

.autul-profile-dropdown-links a:hover,
.home .autul-profile-dropdown-links a:hover {
	background: rgba(0, 229, 255, 0.14) !important;
	color: #ffcc00 !important;
	transform: translateX(3px) !important;
}

.autul-dropdown-divider,
.home .autul-dropdown-divider {
	height: 1px !important;
	background: rgba(0, 229, 255, 0.15) !important;
	margin: 4px 0 !important;
	list-style: none !important;
}

.autul-profile-dropdown-links a.autul-profile-dropdown-logout,
.home .autul-profile-dropdown-links a.autul-profile-dropdown-logout {
	color: #ff9999 !important;
}

.autul-profile-dropdown-links a.autul-profile-dropdown-logout:hover,
.home .autul-profile-dropdown-links a.autul-profile-dropdown-logout:hover {
	background: rgba(255, 75, 75, 0.22) !important;
	color: #ff4b4b !important;
}


/* ==========================================================
   MOBILE-OPTIMIZED LOGIN & REGISTRATION INTERFACE
   ========================================================== */
.autul-account-page-main,
.autul-login-page-main,
.page-template-default .site-main,
.woocommerce-account .site-main {
	padding: 14px 10px 32px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Force 1-column stacked layout on mobile for WooCommerce two-column login/register */
.woocommerce-account .u-columns.col2-set,
.woocommerce-account #customer_login,
.col2-set {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	width: 100% !important;
	max-width: 480px !important;
	margin: 0 auto !important;
}

.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2,
.col2-set .col-1,
.col2-set .col-2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Card Styling for Login & Register forms */
.woocommerce-account form.login,
.woocommerce-account form.register,
.woocommerce-form-login,
.woocommerce-form-register,
.autul-portal-card,
.login,
.register {
	background: linear-gradient(180deg, #0a172e 0%, #060e1d 100%) !important;
	border: 1px solid rgba(0, 229, 255, 0.35) !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 229, 255, 0.15) !important;
	padding: 22px 18px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 460px !important;
}

/* Form Titles */
.woocommerce-account form.login h2,
.woocommerce-account form.register h2,
.autul-portal-title {
	color: #ffcc00 !important;
	font-size: 20px !important;
	font-weight: 900 !important;
	margin: 0 0 14px 0 !important;
	text-align: center !important;
	letter-spacing: 0.02em !important;
}

/* Form Rows & Full Width on Mobile */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row,
.woocommerce-account .form-row-wide,
.woocommerce-account .form-row-first,
.woocommerce-account .form-row-last,
.form-row {
	width: 100% !important;
	float: none !important;
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
}

/* Input Fields - Touch Friendly (48px high, 16px font to prevent mobile zoom) */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="date"],
.woocommerce-account select,
.woocommerce-account textarea,
.autul-portal-card input[type="text"],
.autul-portal-card input[type="password"],
.autul-portal-card input[type="email"] {
	width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 10px 14px !important;
	background: rgba(6, 14, 28, 0.95) !important;
	border: 1px solid rgba(0, 229, 255, 0.35) !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-size: 16px !important;
	box-sizing: border-box !important;
	outline: none !important;
	transition: all 0.2s ease !important;
	-webkit-appearance: none !important;
}

.woocommerce-account input:focus,
.woocommerce-account select:focus,
.woocommerce-account textarea:focus,
.autul-portal-card input:focus {
	border-color: #00e5ff !important;
	box-shadow: 0 0 14px rgba(0, 229, 255, 0.45) !important;
	background: rgba(10, 22, 44, 0.98) !important;
}

/* Submit Buttons - Golden & 48px Height */
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"],
.woocommerce-account .woocommerce-button,
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.autul-portal-card button[type="submit"] {
	width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	background: linear-gradient(135deg, #ffcc00, #ffb300) !important;
	color: #050d1a !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	box-shadow: 0 0 18px rgba(255, 204, 0, 0.45) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 10px !important;
	transition: all 0.2s ease !important;
}

.woocommerce-account button[type="submit"]:hover,
.woocommerce-account input[type="submit"]:hover,
.autul-portal-card button[type="submit"]:hover {
	transform: scale(1.02) !important;
	box-shadow: 0 0 26px rgba(255, 204, 0, 0.65) !important;
}

/* Remember Me & Lost Password */
.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 8px 0 12px !important;
	color: rgba(220, 240, 255, 0.85) !important;
	font-size: 13.5px !important;
}

.woocommerce-account .woocommerce-LostPassword,
.woocommerce-account .lost_password {
	text-align: center !important;
	margin-top: 12px !important;
	font-size: 13px !important;
}

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .lost_password a {
	color: #00e5ff !important;
	text-decoration: none !important;
}

.woocommerce-account .woocommerce-LostPassword a:hover,
.woocommerce-account .lost_password a:hover {
	color: #ffcc00 !important;
}

/* Homepage Drawer Links - Prominent & Focused */
.autul-home-drawer-links {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding: 10px 0 !important;
}

.autul-home-drawer-links li a {
	padding: 14px 18px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	border-radius: 12px !important;
}


/* User Card in Homepage Mobile Drawer */
.home .autul-drawer-user-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background: rgba(16, 33, 61, 0.75) !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.15) !important;
    margin-bottom: 4px !important;
}

.home .autul-drawer-user-avatar-wrap {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1.5px solid #00e5ff !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #081426 !important;
}

.home .autul-drawer-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.home .autul-drawer-user-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
}

.home .autul-drawer-user-tag {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #00ff88 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.home .autul-drawer-user-name {
    margin: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}


/* ==========================================================================
   PERFECT PC FOOTER BRANDING, ZERO-BOX TRANSPARENT FOOTER LOGO & UNIVERSAL GLOW
   ========================================================================== */
@keyframes constantLightning {
	0% {
		filter: drop-shadow(0 0 4px #ffcc00);
		transform: scale(1);
	}
	50% {
		filter: drop-shadow(0 0 18px #00e5ff) drop-shadow(0 0 32px #00a8ff) contrast(1.25);
		transform: scale(1.02);
	}
	100% {
		filter: drop-shadow(0 0 7px #ffcc00);
		transform: scale(1);
	}
}

html body .custom-logo,
html body .site-branding .custom-logo,
html body .custom-logo-link .custom-logo,
html body .custom-logo-link img,
html body .footer-logo,
html body .footer-branding .footer-logo,
html body .site-footer .footer-logo {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	animation: constantLightning 0.5s infinite alternate ease-in-out !important;
	will-change: filter, transform !important;
}

@media (min-width: 901px) {
	.site-footer .footer-branding,
	.home .footer-branding,
	.footer-branding {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: center !important;
		gap: 2px !important;
		margin: 0 !important;
		text-align: left !important;
		flex-shrink: 0 !important;
	}
	.site-footer .footer-tagline,
	.home .footer-tagline,
	.footer-tagline {
		margin: 0 0 0 48px !important;
		display: block !important;
		text-align: left !important;
		white-space: nowrap !important;
	}
}


/* =========================================================================

/* ==========================================================================
   AUTULONIYO SEGMENT (i) INFO BUTTONS & COLLAPSIBLE HUD PANELS (PERFECTED)
   Saves vertical space; single-line title parity; immediate tap/click response
   ========================================================================== */
.home .autul-home-segments-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
    text-align: center !important;
}

@media (max-width: 900px) {
    .home .autul-home-segments {
        padding: 14px 12px 18px !important;
    }
    .home .autul-home-segments-header {
        margin: 0 auto 8px !important;
    }
    .home .autul-home-segments-title {
        font-size: clamp(14px, 4.4vw, 18.5px) !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    .home .autul-heading-info-btn {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        min-height: 17px !important;
        flex-shrink: 0 !important;
    }
    .home .autul-heading-info-btn .autul-info-icon {
        font-size: 10.5px !important;
    }
}

.home .autul-home-segment-tagline-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 4px 10px 4px 14px !important;
    border-radius: 999px !important;
    background: rgba(0, 229, 255, 0.12) !important;
    border: 1px solid rgba(0, 229, 255, 0.40) !important;
    color: #7eeeff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.home .autul-home-segment-tagline-pill:hover {
    background: rgba(0, 229, 255, 0.20) !important;
    border-color: rgba(0, 229, 255, 0.65) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
}

.home .autul-segment-info-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    border-radius: 50% !important;
    background: rgba(0, 229, 255, 0.18) !important;
    border: 1px solid rgba(0, 229, 255, 0.6) !important;
    color: #00e5ff !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.25) !important;
    transition: all 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    flex-shrink: 0 !important;
}

.home .autul-segment-info-btn:hover {
    background: rgba(0, 229, 255, 0.38) !important;
    border-color: #00e5ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.7) !important;
    transform: scale(1.12) !important;
}

.home .autul-segment-info-btn:active,
.home .autul-segment-info-btn.is-active {
    background: #00e5ff !important;
    border-color: #00e5ff !important;
    color: #030b18 !important;
    box-shadow: 0 0 14px #00e5ff !important;
    transform: scale(1.05) !important;
}

.home .autul-segment-info-btn .autul-info-icon {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    font-style: italic !important;
    line-height: 1 !important;
    text-align: center !important;
    pointer-events: none !important;
}

.home .autul-heading-info-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

.home .autul-heading-info-btn .autul-info-icon {
    font-size: 11.5px !important;
}

/* Info Panel (Display Block with Immediate Visibility & Transition) */
html body .autul-segment-info-panel {
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.28s ease, transform 0.28s ease, margin 0.28s ease;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body .autul-segment-info-panel.is-open {
    display: block !important;
    max-height: 380px !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    margin: 8px 0 12px !important;
}

html body .autul-header-info-panel.is-open {
    margin: 8px auto 10px !important;
    max-width: 680px !important;
}

html body .autul-segment-info-inner {
    background: linear-gradient(135deg, rgba(6, 18, 36, 0.96), rgba(8, 26, 52, 0.94)) !important;
    border: 1px solid rgba(0, 229, 255, 0.40) !important;
    border-left: 3px solid #00e5ff !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 229, 255, 0.20) !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

html body .autul-header-info-panel .autul-segment-info-inner {
    text-align: center !important;
    border-left: 1px solid rgba(0, 229, 255, 0.40) !important;
    border-top: 2px solid #00e5ff !important;
    padding: 10px 18px !important;
}

html body .autul-segment-info-panel .autul-home-segment-lead,
html body .autul-segment-info-panel .autul-home-segments-sub {
    margin: 0 !important;
    padding: 0 !important;
    color: #e2f2ff !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .autul-header-info-panel .autul-home-segments-sub {
    font-size: 13px !important;
    color: rgba(220, 242, 255, 0.95) !important;
}