/* AXXITODE Shared Header / Sidebar / Mobile Navigation */
.header-profile{
    width:40px;
    height:40px;
    border-radius:50%;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    text-decoration:none;
    transition:.25s;
}
.header-profile:hover{
    border-color:#fff;
    transform:scale(1.05);
}
.header-profile img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.header-profile svg{
    width:21px;
    height:21px;
    stroke:currentColor;
    fill:none;
}
/* Mobile me header profile hide */
@media(max-width:768px){
    .header-profile{
        display:none !important;
    }
}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden;line-height:1.5}
header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:14px 5%;display:flex;justify-content:space-between;align-items:center;background:#000;border-radius:0 0 24px 24px;border:1px solid rgba(255,255,255,.08)}
.logo{display:flex;align-items:center;text-decoration:none}.logo img{height:32px;width:auto;display:block;object-fit:contain}
.header-actions{display:flex;align-items:center;gap:10px}
.msg-btn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;transition:.25s}
.msg-btn:hover{background:#fff;color:#000}.msg-btn svg{width:18px;height:18px;stroke:currentColor;fill:none}
.msg-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#e11;color:#fff;font-size:10px;font-weight:700;line-height:18px;text-align:center;border:2px solid #000}
.menu-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:.25s}
.menu-btn:hover{background:#fff;color:#000}.menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none}
.sidebar-overlay{
    position:fixed;
    inset:0;
    z-index:99990;
    background:#000;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease,visibility .35s ease;
}
.sidebar-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.side-drawer{
    position:fixed;
    inset:0;
    z-index:99999;
    width:100%;
    height:100vh;
    background:#000;
    color:#fff;
    display:grid;
    grid-template-columns:45% 55%;
    transform:none;
    visibility:hidden;
    pointer-events:none;
    box-shadow:none;
}
.side-drawer.open{
    visibility:visible;
    pointer-events:auto;
}
.side-menu-image{
    position:relative;
    width:100%;
    height:100%;
    background-image:url('https://axxitode.com/uploads/4605.jpg');
    background-size:cover;
    background-position:center;
    transform:translateX(-100%);
    transition:transform .75s cubic-bezier(.76,0,.24,1);
}
.side-menu-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.22);
}
.side-menu-brand{
    position:absolute;
    top:34px;
    left:40px;
    z-index:2;
}
.side-menu-brand img{
    width:155px;
    height:auto;
    display:block;
}
.side-menu-panel{
    position:relative;
    width:100%;
    height:100%;
    background:#000;
    color:#fff;
    padding:92px clamp(45px,7vw,100px) 28px;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .75s cubic-bezier(.76,0,.24,1);
    overflow-y:auto;
}
.side-drawer.open .side-menu-image,
.side-drawer.open .side-menu-panel{
    transform:translateX(0);
}
.side-close{
    position:absolute;
    top:18px;
    right:32px;
    width:52px;
    height:52px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:40px;
    font-weight:200;
    line-height:1;
    cursor:pointer;
    opacity:.82;
    transition:transform .3s ease,opacity .3s ease;
    z-index:5;
}
.side-close:hover{
    transform:rotate(90deg);
    opacity:1;
}
.side-menu-panel::before{
    content:"";
    position:absolute;
    top:70px;
    left:7%;
    right:7%;
    height:1px;
    background:rgba(255,255,255,.15);
}
.side-menu-head{
    color:rgba(255,255,255,.5);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:20px;
}
.side-menu-nav{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.side-link{
    position:relative;
    display:block;
    color:#fff;
    text-decoration:none;
    font-size:clamp(30px,2.8vw,44px);
    line-height:1.18;
    font-weight:400;
    letter-spacing:-1.5px;
    padding:2px 0;
    opacity:.88;
    transition:transform .25s ease,opacity .25s ease;
}
.side-link:hover{
    opacity:1;
    transform:translateX(12px);
}
.side-link::before{
    content:"→";
    position:absolute;
    left:-34px;
    top:50%;
    transform:translateY(-50%) translateX(-10px);
    font-size:18px;
    opacity:0;
    transition:.25s ease;
}
.side-link:hover::before{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}
.side-dash-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 0 22px;
    padding:11px 22px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50px;
    background:#fff;
    color:#000;
    text-decoration:none;
    font-size:14px;
    font-weight:800;
    letter-spacing:.2px;
    box-shadow:0 8px 24px rgba(255,255,255,.12);
    transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.side-dash-btn:hover{
    background:#f0f0f0;
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(255,255,255,.18);
}
.side-divider{
    height:1px;
    background:rgba(255,255,255,.14);
    margin:24px 0 20px;
}
.side-section-label{
    padding:0 0 8px;
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
    font-weight:600;
}
.media-menu{
    width:100%;
}
.media-toggle{
    width:100%;
    border:0;
    background:none;
    color:#fff;
    padding:3px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    font:inherit;
    text-align:left;
}
.media-toggle-left{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:clamp(30px,2.8vw,44px);
    line-height:1.18;
    font-weight:400;
    letter-spacing:-1.5px;
    opacity:.88;
    transition:.25s;
}
.media-toggle-left svg{
    width:22px;
    height:22px;
    stroke:currentColor;
    fill:none;
}
.media-toggle:hover .media-toggle-left{
    opacity:1;
    transform:translateX(12px);
}
.media-chevron{
    width:25px;
    height:25px;
    stroke:#fff;
    fill:none;
    transition:transform .3s ease;
    opacity:.7;
}
.media-menu.open .media-chevron{
    transform:rotate(180deg);
}
.media-submenu{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s ease;
}
.media-menu.open .media-submenu{
    grid-template-rows:1fr;
}
.media-submenu-inner{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding-left:22px;
}
.media-sub-link{
    color:rgba(255,255,255,.65);
    text-decoration:none;
    font-size:20px;
    line-height:1.35;
    padding:4px 0;
    transition:.25s;
}
.media-sub-link:hover{
    color:#fff;
    transform:translateX(8px);
}
.side-menu-bottom{
    margin-top:auto;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.15);
}
.side-sign-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:170px;
    height:46px;
    padding:0 24px;
    border-radius:50px;
    background:#fff;
    color:#111;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.25s;
}
.side-sign-btn:hover{
    background:#e8e8e8;
    transform:translateY(-2px);
}
.side-menu-social{
    display:flex;
    gap:22px;
    margin-top:24px;
}
.side-menu-social a{
    color:rgba(255,255,255,.6);
    text-decoration:none;
    font-size:12px;
}
.side-menu-social a:hover{color:#fff}
body.menu-open{overflow:hidden}
@media(max-width:768px){
    .side-drawer{
        display:block;
        overflow:hidden;
    }
    .side-menu-image{display:none}
    .side-menu-panel{
        position:absolute;
        inset:0;
        width:100%;
        padding:92px 35px 25px;
        transform:translateX(100%);
    }
    .side-menu-panel::before{left:25px;right:25px}
    .side-close{right:16px;top:14px}
    .side-link,
    .media-toggle-left{
        font-size:36px;
        line-height:1.25;
    }
    .media-sub-link{font-size:19px}
}
@media(max-width:420px){
    .side-menu-panel{
        padding-left:28px;
        padding-right:28px;
        padding-bottom:52px;
    }
    .side-menu-bottom{
        margin-top:22px;
    }
    .side-link,
    .media-toggle-left{font-size:32px}
}
.mobile-bottom-nav,
.mobile-bottom-nav *{
    -webkit-tap-highlight-color:transparent;
}
.mbn-item{
    position:relative;
    -webkit-tap-highlight-color:transparent;
    outline:none !important;
    transition:transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
.mbn-item:focus,
.mbn-item:focus-visible,
.mbn-item:active{
    outline:none !important;
    background:transparent !important;
    color:inherit;
}
.mbn-item.is-tapping{
    animation:mbnTapBounce .28s cubic-bezier(.2,.8,.2,1);
}
.mbn-item.is-tapping > svg,
.mbn-item.is-tapping > img,
.mbn-item.is-tapping .mbn-upload,
.mbn-item.is-tapping .mbn-ai-earth{
    animation:mbnIconBounce .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes mbnTapBounce{
    0%{transform:scale(1)}
    45%{transform:scale(.91)}
    75%{transform:scale(1.035)}
    100%{transform:scale(1)}
}
@keyframes mbnIconBounce{
    0%{transform:scale(1)}
    45%{transform:scale(.88)}
    75%{transform:scale(1.06)}
    100%{transform:scale(1)}
}
.mobile-bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#fff;border-top:1px solid #e5e5e5;padding:7px 10px max(7px, env(safe-area-inset-bottom,0px));min-height:64px;height:auto}
.mobile-bottom-nav-inner{max-width:480px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;min-height:50px}
.mbn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:#666;font-size:10px;font-weight:600;line-height:1.1;min-width:0}
.mbn-item svg{width:22px;height:22px;stroke:currentColor;fill:none}
.mbn-upload{width:36px;height:36px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}
.mbn-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #ddd}

/* =========================================================
   HIGHLIGHTED AI GLOBE (same style as AXXI welcome GIF)
========================================================= */
.mbn-ai-earth {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    border: 2px solid rgba(0, 180, 255, 0.45);
    box-shadow: 
        0 0 12px rgba(0, 150, 255, 0.55),
        0 0 24px rgba(0, 150, 255, 0.35),
        0 0 36px rgba(0, 180, 255, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mbn-ai-earth canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    display: block;
}

.mbn-item:hover .mbn-ai-earth,
.mbn-item:active .mbn-ai-earth {
    transform: scale(1.08);
    border-color: rgba(0, 200, 255, 0.75);
    box-shadow: 
        0 0 18px rgba(0, 150, 255, 0.8),
        0 0 32px rgba(0, 150, 255, 0.5),
        0 0 48px rgba(0, 180, 255, 0.35);
}

.mbn-item.is-tapping .mbn-ai-earth {
    transform: scale(0.92);
    box-shadow: 
        0 0 22px rgba(0, 150, 255, 1),
        0 0 40px rgba(0, 180, 255, 0.7);
}

@media(max-width:1024px){.featured{grid-template-columns:1fr}.article-grid{grid-template-columns:repeat(2,1fr)}.product-grid,.reel-grid{grid-template-columns:repeat(3,1fr)}.gallery-grid{columns:3 180px}}
@media(max-width:768px){
    .side-drawer{width:min(390px,94vw)}
    .side-menu-panel{
        padding-bottom:58px;
    }
    .side-menu-bottom{
        margin-top:26px;
        padding-top:18px;
    }
    .side-sign-btn{
        margin-bottom:8px;
    }
    .mobile-bottom-nav{
        display:block;
        min-height:64px;
        padding-bottom:max(7px, env(safe-area-inset-bottom,0px));
    }
    body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px){.discover{margin-top:-42px;padding:100px 0 50px}.hero{height:70vh;min-height:480px;border-radius:0 0 40px 40px}.article-grid,.product-grid,.reel-grid{grid-template-columns:repeat(2,1fr);gap:12px}.feat-main{min-height:340px}.feat-main img{min-height:340px}.h-product-card{flex:0 0 160px}}
@media(max-width:480px){.article-grid{grid-template-columns:1fr}}
/* =========================================================
   SIDEBAR PWA INSTALLER
========================================================= */
.pwa-install-area.pwa-hidden{
    display:none !important;
}
.pwa-install-area{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 28px;
    padding:0 0 24px;
    border-bottom:1px solid rgba(255,255,255,.14);
}
.pwa-install-label{
    flex:1;
    min-width:0;
}
.pwa-install-label strong{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#fff;
    margin-bottom:3px;
}
.pwa-install-label span{
    display:block;
    font-size:10px;
    color:rgba(255,255,255,.42);
}
.pwa-install-icons{
    display:flex;
    gap:9px;
    flex:0 0 auto;
}
.pwa-install-btn{
    width:52px;
    height:52px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:15px;
    background:rgba(255,255,255,.07);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .25s ease,background .25s ease,border-color .25s ease;
    padding:0;
}
.pwa-install-btn:hover{
    transform:translateY(-3px);
    background:#fff;
    color:#000;
    border-color:#fff;
}
.pwa-install-btn svg{
    width:24px;
    height:24px;
    stroke:currentColor;
    fill:none;
}
.pwa-install-btn.is-installed{
    opacity:.38;
    cursor:default;
    transform:none;
}
.pwa-install-btn.android.is-ready,
.pwa-install-btn.windows.is-ready{
    border-color:rgba(255,255,255,.55);
}
.pwa-install-btn.ios.is-guide{
    border-color:rgba(255,255,255,.55);
}
.pwa-ios-guide{
    position:fixed;
    inset:0;
    z-index:100005;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.78);
    backdrop-filter:blur(12px);
}
.pwa-ios-card{
    width:min(430px,100%);
    background:#fff;
    color:#111;
    border-radius:24px;
    padding:28px;
    box-shadow:0 30px 100px rgba(0,0,0,.45);
}
.pwa-ios-card h3{
    font-size:22px;
    line-height:1.15;
    margin:0 0 10px;
}
.pwa-ios-card p{
    font-size:14px;
    line-height:1.55;
    color:#555;
    margin:0 0 18px;
}
.pwa-ios-card ol{
    margin:0 0 22px 20px;
    padding:0;
    color:#333;
    font-size:14px;
    line-height:1.65;
}
.pwa-ios-close{
    width:100%;
    height:46px;
    border:0;
    border-radius:50px;
    background:#111;
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
@media(max-width:768px){
    .pwa-install-area{
        margin-bottom:24px;
        padding-bottom:20px;
    }
    .pwa-install-label strong{font-size:12px}
    .pwa-install-btn{
        width:48px;
        height:48px;
        border-radius:14px;
    }
}