:root{
    --hb-obsidian:#08070c;
    --hb-obsidian-soft:#0d0b13;
    --hb-charcoal:#15121c;
    --hb-charcoal-raised:#1b1724;
    --hb-violet:#9c6cff;
    --hb-violet-bright:#c5a8ff;
    --hb-violet-deep:#5c2bb6;
    --hb-gold:#c9a96b;
    --hb-gold-bright:#e8cf97;
    --hb-ivory:#f5f1fb;
    --hb-silver:#cbc4d6;
    --hb-muted:#9d95aa;
    --hb-success:#79d6ad;
    --hb-danger:#ff8f9b;
    --hb-border:rgba(217,197,255,.14);
    --hb-border-strong:rgba(217,197,255,.26);
    --hb-shadow:0 24px 70px rgba(0,0,0,.38);
    --hb-shadow-soft:0 14px 36px rgba(0,0,0,.26);
    --hb-radius-sm:10px;
    --hb-radius-md:16px;
    --hb-radius-lg:24px;
    --hb-display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --hb-ui:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hb-container:1240px;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f9;
}

header{
    background:#0d6efd;
    color:white;
    padding:20px;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
    padding:20px;
    box-sizing:border-box;
}

.card{
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

footer{
    margin-top:40px;
    background:#222;
    color:white;
    text-align:center;
    padding:20px;
}

button{
    background:#0d6efd;
    color:white;
    border:none;
    padding:12px 24px;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}

button:hover{
    background:#0b5ed7;
}

input{
    width:100%;
    padding:12px;
    margin-top:5px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:8px;
    box-sizing:border-box;
    font-size:16px;
}

label{
    font-weight:bold;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-size:34px;
    font-weight:bold;
    color:white;
}

nav{
    display:flex;
    gap:25px;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

nav a:hover{
    color:#ffd54f;
}

.form-card{
    max-width:600px;
    margin:0 auto;
}

.message{
    margin:20px 0;
    padding:14px;
    border-radius:8px;
    font-weight:bold;
}

.message.success{
    background:#d1e7dd;
    color:#0f5132;
    border:1px solid #badbcc;
}

.message.error{
    background:#f8d7da;
    color:#842029;
    border:1px solid #f5c2c7;
}
.product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:20px;
}

.product-card{
    display:flex;
    flex-direction:column;
}

.product-image{
    width:100%;
    height:200px;
    object-fit:contain;
    border-radius:8px;
    margin-bottom:15px;
}

.product-price{
    font-size:22px;
    font-weight:bold;
    color:#0d6efd;
}
textarea,
select{
    width:100%;
    padding:12px;
    margin-top:5px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:8px;
    box-sizing:border-box;
    font-size:16px;
    font-family:inherit;
}

textarea{
    resize:vertical;
}
.admin-page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
}

.table-wrapper{
    overflow-x:auto;
}

.admin-table{
    width:100%;
    border-collapse:collapse;
    background:white;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

.admin-table th,
.admin-table td{
    padding:14px;
    border-bottom:1px solid #ddd;
    text-align:left;
    vertical-align:middle;
}

.admin-table th{
    background:#f1f3f5;
}

.admin-product-image{
    width:70px;
    height:70px;
    object-fit:contain;
    border-radius:8px;
}

.status-badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:20px;
    font-size:14px;
    font-weight:bold;
}

.status-badge.active{
    background:#d1e7dd;
    color:#0f5132;
}

.status-badge.inactive{
    background:#f8d7da;
    color:#842029;
}

.admin-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.inline-form{
    display:inline;
    margin:0;
}

.small-button{
    padding:7px 12px;
    font-size:14px;
}
.danger-button{
    background:#dc3545;
}

.danger-button:hover{
    background:#bb2d3b;
}
.admin-product-thumbnail{
    width:70px;
    height:70px;
    max-width:70px;
    object-fit:cover;
    border-radius:10px;
    display:block;
}

.admin-product-thumbnail-placeholder{
    width:70px;
    height:70px;
    border:1px solid #d0d0d0;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:12px;
    color:#777;
    background:#f5f5f5;
}

.admin-table td{
    vertical-align:middle;
}

.admin-actions{
    white-space:nowrap;
}

.product-details{
    display:grid;
    grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr);
    gap:50px;
    align-items:start;
    padding:45px 0;
}

.product-details-image img{
    width:100%;
    max-height:600px;
    object-fit:contain;
    border-radius:16px;
    background:#ffffff;
}

.product-details-placeholder{
    width:100%;
    min-height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d6d6d6;
    border-radius:16px;
    background:#f5f5f5;
    color:#777777;
}

.product-details-content h1{
    margin-top:20px;
    margin-bottom:15px;
}

.product-details-price{
    margin:0 0 25px;
    font-size:30px;
    font-weight:700;
}

.product-details-description{
    margin-bottom:25px;
    line-height:1.7;
}

.product-details-stock{
    margin-bottom:25px;
    font-weight:700;
}

.in-stock{
    color:#198754;
}

.out-of-stock{
    color:#dc3545;
}

.back-link,
.product-title-link{
    color:#126df5;
    text-decoration:none;
}

.back-link:hover,
.product-title-link:hover{
    text-decoration:underline;
}

.product-image-link{
    display:block;
}

.product-request-button{
    border:0;
    cursor:pointer;
}

.disabled-button{
    opacity:0.6;
    cursor:not-allowed;
}

.product-not-found{
    padding:70px 0;
    text-align:center;
}

@media (max-width:750px){

    .product-details{
        grid-template-columns:1fr;
        gap:30px;
    }

    .product-details-placeholder{
        min-height:280px;
    }
}

a.button{
    display:inline-block;
    padding:10px 18px;
    border-radius:7px;
    background:#126df5;
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
}

a.button:hover{
    background:#0b57cc;
    text-decoration:none;
}

.product-card a.button{
    align-self:auto;
    width:auto;
    min-width:125px;
    padding:9px 16px;
    margin-top:auto;
    text-align:center;
}
.request-form-card{
    margin-top:40px;
    margin-bottom:40px;
}

.request-form-card h1{
    margin-top:20px;
}

.product-request-button{
    display:inline-block;
    text-decoration:none;
}

.request-table{
    min-width:1100px;
}

.request-contact{
    min-width:190px;
}

.request-contact a,
.request-contact span{
    display:block;
    margin-bottom:5px;
}

.request-message{
    min-width:220px;
    max-width:320px;
    line-height:1.5;
    white-space:normal;
}

.request-status-form{
    min-width:150px;
}

.request-status-form select{
    margin:0 0 8px;
    padding:8px;
    font-size:14px;
}

.request-status-form button{
    width:100%;
}

.muted-text{
    color:#777;
    font-style:italic;
}

.support-ticket-form{
    margin-top:40px;
    margin-bottom:40px;
}

.support-ticket-form h1{
    margin-top:0;
}

.ticket-confirmation{
    margin:20px 0;
    padding:18px;
    border:1px solid #9ec5fe;
    border-radius:10px;
    background:#e7f1ff;
    text-align:center;
}

.ticket-confirmation strong{
    display:block;
    margin:10px 0;
    font-size:24px;
    color:#0d6efd;
    letter-spacing:1px;
}

.ticket-table{
    min-width:1250px;
}

.ticket-view-button{
    display:inline-block;
    text-decoration:none;
    color:#ffffff;
    background:#0d6efd;
}

.ticket-details-grid{
    display:grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(320px, .8fr);
    gap:30px;
    align-items:start;
    margin-top:25px;
}

.ticket-information h1{
    margin-top:0;
}

.ticket-description{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #dddddd;
    line-height:1.7;
}

.ticket-management h2{
    margin-top:0;
}

.ticket-priority{
    display:inline-block;
    padding:6px 10px;
    border-radius:20px;
    font-weight:bold;
}

.ticket-priority.low{
    background:#e2e3e5;
    color:#41464b;
}

.ticket-priority.normal{
    background:#cff4fc;
    color:#055160;
}

.ticket-priority.high{
    background:#fff3cd;
    color:#664d03;
}

.ticket-priority.urgent{
    background:#f8d7da;
    color:#842029;
}

@media (max-width:850px){

    .ticket-details-grid{
        grid-template-columns:1fr;
    }
}

.form-help{
    display:block;
    margin-top:-8px;
    margin-bottom:18px;
    color:#666;
    line-height:1.5;
}

.ticket-attachments{
    margin-top:30px;
    padding-top:20px;
    border-top:1px solid #dddddd;
}

.ticket-attachment-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr));
    gap:16px;
}

.ticket-attachment-card{
    margin:0;
    padding:10px;
    border:1px solid #dddddd;
    border-radius:10px;
    background:#f8f9fa;
}

.ticket-attachment-card a{
    display:block;
}

.ticket-attachment-card img{
    display:block;
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:7px;
}

.ticket-attachment-card figcaption{
    margin-top:8px;
    font-size:13px;
    overflow-wrap:anywhere;
}

.ticket-attachment-card figcaption span{
    display:block;
    margin-top:4px;
    color:#777777;
}

.ticket-attachment-missing{
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:15px;
    border:1px dashed #dc3545;
    border-radius:10px;
    color:#842029;
    background:#f8d7da;
    text-align:center;
}

.delete-ticket-form{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #dddddd;
}

.delete-ticket-button{
    width:100%;
}

.ticket-lookup-card{
    max-width:700px;
    margin:35px auto;
}

.public-ticket-result{
    max-width:900px;
    margin:25px auto 40px;
}

.public-ticket-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:25px;
}

.ticket-result-label{
    margin:0 0 5px;
    color:#666666;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.public-ticket-heading h2{
    margin:0;
    overflow-wrap:anywhere;
}

.ticket-status-badge{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    font-weight:bold;
    white-space:nowrap;
    background:#e9ecef;
    color:#333333;
}

.status-open{
    background:#cfe2ff;
    color:#084298;
}

.status-reviewing{
    background:#fff3cd;
    color:#664d03;
}

.status-waiting-for-customer{
    background:#ffe5d0;
    color:#7a3e00;
}

.status-in-progress{
    background:#cff4fc;
    color:#055160;
}

.status-resolved{
    background:#d1e7dd;
    color:#0f5132;
}

.status-cancelled{
    background:#e2e3e5;
    color:#41464b;
}

.public-ticket-grid{
    display:grid;
    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));
    gap:12px 25px;
    padding:20px;
    border-radius:10px;
    background:#f8f9fa;
}

.public-ticket-grid p{
    margin:0;
}

.public-ticket-subject{
    margin-top:25px;
}

.public-ticket-subject h3{
    margin-bottom:10px;
}

.public-ticket-subject p{
    line-height:1.7;
    overflow-wrap:anywhere;
}

.public-ticket-note{
    margin-top:25px;
    padding-top:18px;
    border-top:1px solid #dddddd;
    color:#666666;
    font-size:14px;
}

@media(max-width:600px){

    .public-ticket-heading{
        flex-direction:column;
    }
}

.ticket-conversation,
.public-ticket-conversation{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid #dddddd;
}

.ticket-message-list{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:18px;
}

.ticket-message{
    padding:16px;
    border:1px solid #d6e4ff;
    border-radius:10px;
    background:#f3f7ff;
}

.ticket-message-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:10px;
}

.ticket-message-heading span{
    color:#666666;
    font-size:13px;
    white-space:nowrap;
}

.ticket-message p{
    margin:0;
    line-height:1.65;
    overflow-wrap:anywhere;
}

.public-reply-form{
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid #dddddd;
}

.public-reply-form h3{
    margin-top:0;
}

@media(max-width:600px){

    .ticket-message-heading{
        flex-direction:column;
        gap:5px;
    }

    .ticket-message-heading span{
        white-space:normal;
    }
}

.ticket-message-admin{
    border-color:#b6d4fe;
    background:#eef5ff;
}

.ticket-message-customer{
    margin-left:45px;
    border-color:#badbcc;
    background:#edf8f1;
}

.ticket-message-author-type{
    display:inline-block;
    margin-left:8px;
    color:#666666;
    font-weight:normal;
}

.customer-ticket-reply{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid #dddddd;
}

.customer-ticket-reply h3{
    margin-top:0;
}

.customer-ticket-reply textarea{
    width:100%;
    resize:vertical;
}

@media(max-width:600px){

    .ticket-message-customer{
        margin-left:0;
    }

    .ticket-message-author-type{
        display:block;
        margin-top:4px;
        margin-left:0;
    }
}

.unread-reply-badge{
    display:inline-block;
    margin-top:7px;
    padding:4px 9px;
    border-radius:999px;
    background:#dc3545;
    color:#ffffff;
    font-size:12px;
    font-weight:bold;
    white-space:nowrap;
}

.ticket-view-button.has-unread-replies{
    background:#dc3545;
    border-color:#dc3545;
    color:#ffffff;
}

.ticket-view-button.has-unread-replies:hover{
    background:#bb2d3b;
    border-color:#b02a37;
}

/* =========================================================
   Staff-only management layout
   ========================================================= */

.staff-site-header > .container,
.staff-site-header + main.container{
    width:94%;
    max-width:1560px;
}

@media(max-width:760px){

    .staff-site-header > .container,
    .staff-site-header + main.container{
        width:100%;
    }
}

/* =========================================================
   Responsive administrator header
   ========================================================= */

.admin-site-header{
    padding:14px 20px;
}

.admin-navbar{
    display:grid;
    grid-template-columns:max-content minmax(0, 1fr);
    align-items:center;
    gap:24px 38px;
    padding-top:8px;
    padding-bottom:8px;
}

.admin-logo{
    min-width:0;
    font-size:clamp(26px, 2.4vw, 34px);
    line-height:1.1;
    white-space:nowrap;
}

.admin-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:10px 20px;
    min-width:0;
}

.admin-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
}

.admin-nav-unread-badge{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    background:#dc3545;
    color:#ffffff;
    font-size:11px;
    font-weight:bold;
    line-height:1.2;
    white-space:nowrap;
}

@media(max-width:1050px){

    .admin-navbar{
        grid-template-columns:1fr;
        gap:18px;
    }

    .admin-nav{
        width:100%;
        justify-content:flex-start;
    }
}

@media(max-width:700px){

    .admin-site-header{
        padding:12px;
    }

    .admin-navbar{
        width:100%;
        padding:8px 0;
    }

    .admin-logo{
        font-size:28px;
        white-space:normal;
    }

    .admin-nav{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px;
    }

    .admin-nav a{
        min-height:42px;
        padding:8px 10px;
        border:1px solid rgba(255,255,255,.28);
        border-radius:8px;
        text-align:center;
        white-space:normal;
    }
}

@media(max-width:420px){

    .admin-nav{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   HubBits & MorDocs: shared public design foundation
   ========================================================= */

.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.site-header,
.site-header *,
.site-footer,
.site-footer *,
.storefront-page,
.storefront-page *{
    box-sizing:border-box;
}

.site-header{
    position:sticky;
    z-index:100;
    top:0;
    padding:0;
    border-bottom:1px solid rgba(226,207,255,.12);
    background:rgba(8,7,12,.92);
    box-shadow:0 12px 40px rgba(0,0,0,.28);
    color:var(--hb-ivory);
    isolation:isolate;
    backdrop-filter:blur(18px);
}

.site-header__aura{
    position:absolute;
    z-index:-1;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.site-header__aura::before{
    content:"";
    position:absolute;
    width:420px;
    height:160px;
    top:-105px;
    left:7%;
    border-radius:50%;
    background:rgba(133,76,242,.25);
    filter:blur(55px);
}

.site-header__inner{
    position:relative;
    width:min(94%, var(--hb-container));
    max-width:var(--hb-container);
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    margin:0 auto;
    padding:14px 0;
}

.site-brand{
    display:inline-flex;
    min-width:max-content;
    align-items:center;
    gap:13px;
    color:var(--hb-ivory);
    text-decoration:none;
}

.site-brand:hover,
.site-brand:focus-visible{
    color:var(--hb-ivory);
    text-decoration:none;
}

.site-brand:focus-visible{
    border-radius:var(--hb-radius-sm);
    outline:3px solid rgba(197,168,255,.42);
    outline-offset:5px;
}

.site-brand__sigil{
    position:relative;
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(232,207,151,.45);
    border-radius:15px 15px 18px 18px;
    background:
        radial-gradient(circle at 50% 30%, rgba(173,120,255,.28), transparent 56%),
        linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 24px rgba(123,67,225,.15);
}

.site-brand__sigil::after{
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(197,168,255,.18);
    border-radius:11px;
}

.site-brand__sigil svg{
    width:23px;
    height:23px;
    fill:var(--hb-gold-bright);
    filter:drop-shadow(0 0 8px rgba(197,168,255,.38));
}

.site-brand__copy{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.site-brand__name{
    font-family:var(--hb-display);
    font-size:clamp(20px, 2vw, 27px);
    font-weight:700;
    letter-spacing:.015em;
    text-shadow:0 1px 18px rgba(197,168,255,.1);
}

.site-brand__name em,
.site-footer__name em{
    color:var(--hb-gold);
    font-style:normal;
}

.site-brand__tagline{
    margin-top:7px;
    color:var(--hb-muted);
    font-family:var(--hb-ui);
    font-size:9px;
    font-weight:700;
    letter-spacing:.19em;
    text-transform:uppercase;
}

.site-nav-shell{
    min-width:0;
}

.site-nav-toggle{
    display:none;
    list-style:none;
}

.site-nav-toggle::-webkit-details-marker{
    display:none;
}

.site-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
}

.site-nav__link,
.site-nav__account{
    position:relative;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 11px;
    border:1px solid transparent;
    border-radius:10px;
    color:var(--hb-silver);
    font-family:var(--hb-ui);
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.site-nav__link::after{
    content:"";
    position:absolute;
    right:11px;
    bottom:5px;
    left:11px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--hb-gold), transparent);
    opacity:0;
    transform:scaleX(.35);
    transition:opacity .2s ease, transform .2s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible,
.site-nav__link.is-active{
    color:var(--hb-ivory);
    background:rgba(190,151,255,.07);
    text-decoration:none;
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link.is-active::after{
    opacity:1;
    transform:scaleX(1);
}

.site-nav__link:focus-visible,
.site-nav__account:focus-visible,
.site-nav-toggle:focus-visible{
    border-color:rgba(197,168,255,.62);
    outline:3px solid rgba(197,168,255,.24);
    outline-offset:2px;
}

.site-nav__divider{
    width:1px;
    height:24px;
    margin:0 3px;
    background:rgba(226,207,255,.15);
}

.site-nav__account{
    margin-left:3px;
    border-color:rgba(201,169,107,.34);
    background:rgba(201,169,107,.07);
    color:var(--hb-gold-bright);
}

.site-nav__account:hover,
.site-nav__account:focus-visible,
.site-nav__account.is-active{
    border-color:rgba(232,207,151,.62);
    background:rgba(201,169,107,.13);
    color:#fff7e4;
    text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(0,0,0,.2);
}

.site-footer{
    position:relative;
    margin-top:64px;
    padding:0;
    overflow:hidden;
    border-top:1px solid rgba(226,207,255,.12);
    background:
        radial-gradient(circle at 14% 0%, rgba(114,62,208,.16), transparent 30%),
        #09080d;
    color:var(--hb-silver);
    text-align:left;
}

.storefront-page .site-footer{
    margin-top:0;
}

.site-footer__inner{
    width:min(94%, var(--hb-container));
    max-width:var(--hb-container);
    display:grid;
    grid-template-columns:minmax(260px, 1.3fr) minmax(340px, .8fr);
    gap:80px;
    margin:0 auto;
    padding:66px 0 46px;
}

.site-footer__brand{
    max-width:500px;
}

.site-footer__name{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-size:clamp(24px, 3vw, 34px);
    font-weight:700;
    text-decoration:none;
}

.site-footer__name:hover,
.site-footer__name:focus-visible{
    color:var(--hb-gold-bright);
    text-decoration:none;
}

.site-footer__brand p{
    max-width:460px;
    margin:18px 0 0;
    color:var(--hb-muted);
    font-family:var(--hb-ui);
    font-size:15px;
    line-height:1.75;
}

.site-footer__links{
    display:grid;
    grid-template-columns:repeat(2, minmax(130px, 1fr));
    gap:40px;
}

.site-footer .site-footer__links h2{
    margin:0 0 16px;
    color:var(--hb-gold-bright);
    font-family:var(--hb-ui);
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.site-footer__links a{
    display:table;
    margin:10px 0;
    color:var(--hb-silver);
    font-family:var(--hb-ui);
    font-size:14px;
    text-decoration:none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible{
    color:var(--hb-violet-bright);
    text-decoration:none;
}

.site-footer__name:focus-visible,
.site-footer__links a:focus-visible{
    border-radius:4px;
    outline:3px solid rgba(197,168,255,.28);
    outline-offset:4px;
}

.site-footer__base{
    width:min(94%, var(--hb-container));
    max-width:var(--hb-container);
    margin:0 auto;
    padding:21px 0 25px;
    border-top:1px solid rgba(226,207,255,.1);
}

.site-footer__base p{
    margin:0;
    color:#777080;
    font-family:var(--hb-ui);
    font-size:12px;
    letter-spacing:.02em;
}

.voyage-easter-egg{
    position:relative;
    padding:2px 16px 18px;
    text-align:center;
}

.voyage-note{
    width:min(100%, 760px);
    margin:0 auto;
}

.voyage-note[open]{
    display:flex;
    align-items:center;
    flex-direction:column-reverse;
}

.voyage-note__trigger{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    margin:0 auto;
    padding:0;
    border:0;
    border-radius:50%;
    color:var(--hb-violet-bright);
    list-style:none;
    cursor:pointer;
}

.voyage-note__trigger::-webkit-details-marker{
    display:none;
}

.voyage-note__trigger::marker{
    content:"";
}

.voyage-note__mark{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.42);
    border-radius:7px;
    background:
        radial-gradient(circle, rgba(156,108,255,.18), transparent 68%),
        #0d0b13;
    box-shadow:
        0 0 0 rgba(156,108,255,0),
        inset 0 0 8px rgba(201,169,107,.05);
    color:var(--hb-gold-bright);
    font-size:10px;
    transform:rotate(45deg);
    animation:voyage-signal 8s ease-in-out infinite;
    transition:
        border-color .25s ease,
        color .25s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.voyage-note__trigger:hover .voyage-note__mark,
.voyage-note__trigger:focus-visible .voyage-note__mark,
.voyage-note[open] .voyage-note__mark{
    border-color:rgba(232,207,151,.78);
    color:#fff0c7;
    box-shadow:
        0 0 18px rgba(156,108,255,.32),
        0 0 6px rgba(232,207,151,.2),
        inset 0 0 10px rgba(156,108,255,.1);
    transform:rotate(135deg) scale(1.04);
}

.voyage-note[open] .voyage-note__mark{
    animation:none;
}

.voyage-note__trigger:focus-visible{
    outline:3px solid rgba(197,168,255,.3);
    outline-offset:3px;
}

.voyage-note__message{
    width:min(100%, 720px);
    margin:0 auto 20px;
    padding:30px 34px;
    border:1px solid rgba(226,207,255,.13);
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(116,59,216,.1), transparent 42%),
        rgba(15,12,21,.88);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 45px rgba(0,0,0,.28);
    color:#a9a1b4;
    font-family:var(--hb-ui);
    font-size:13px;
    line-height:1.75;
    text-align:center;
    animation:voyage-note-reveal .52s cubic-bezier(.2,.72,.2,1) both;
}

.voyage-note__message p{
    margin:0 0 14px;
}

.voyage-note__message p:last-child{
    margin-bottom:0;
}

.voyage-note__message strong{
    color:#d8d1e1;
}

.voyage-note__message em{
    color:var(--hb-gold-bright);
}

.voyage-note__eyebrow{
    color:var(--hb-violet-bright);
    font-family:var(--hb-display);
    font-size:17px;
    font-weight:700;
    letter-spacing:.06em;
}

.voyage-note__signoff{
    padding-top:5px;
    color:var(--hb-gold-bright);
    font-family:var(--hb-display);
    font-size:15px;
}

@keyframes voyage-signal{
    0%, 78%, 100%{
        box-shadow:
            0 0 0 rgba(156,108,255,0),
            inset 0 0 8px rgba(201,169,107,.05);
    }
    86%{
        box-shadow:
            0 0 15px rgba(156,108,255,.24),
            0 0 4px rgba(232,207,151,.12),
            inset 0 0 10px rgba(156,108,255,.08);
    }
    92%{
        box-shadow:
            0 0 4px rgba(156,108,255,.07),
            inset 0 0 8px rgba(201,169,107,.05);
    }
}

@keyframes voyage-note-reveal{
    from{
        opacity:0;
        transform:translateY(12px) scale(.985);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.site-footer--staff{
    margin-top:40px;
    padding:0;
    background:#222;
    box-shadow:none;
    color:#fff;
    text-align:center;
}

.site-footer__staff-inner{
    padding:20px;
}

.site-footer__staff-inner p{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}

/* Storefront theme is intentionally scoped away from Phase 2 pages. */

.storefront-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    margin:0;
    background:
        radial-gradient(circle at 85% 8%, rgba(104,47,201,.17), transparent 28%),
        radial-gradient(circle at 8% 34%, rgba(201,169,107,.055), transparent 25%),
        var(--hb-obsidian);
    color:var(--hb-silver);
    font-family:var(--hb-ui);
    font-size:16px;
    line-height:1.65;
}

.storefront-page main{
    flex:1 0 auto;
}

.storefront-page .container{
    width:min(92%, var(--hb-container));
    max-width:var(--hb-container);
    margin:0 auto;
    padding-right:0;
    padding-left:0;
}

.storefront-page h1,
.storefront-page h2,
.storefront-page h3{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-weight:700;
    line-height:1.12;
    text-wrap:balance;
}

.storefront-page h1{
    font-size:clamp(45px, 6.3vw, 78px);
    letter-spacing:-.035em;
}

.storefront-page h2{
    font-size:clamp(31px, 4vw, 48px);
    letter-spacing:-.025em;
}

.storefront-page h3{
    font-size:23px;
}

.storefront-page a{
    color:var(--hb-violet-bright);
}

.storefront-page a:hover{
    color:#dccbff;
}

.storefront-page ::selection{
    background:rgba(156,108,255,.38);
    color:#fff;
}

.eyebrow{
    margin:0 0 14px;
    color:var(--hb-gold-bright);
    font-family:var(--hb-ui);
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
    line-height:1.4;
    text-transform:uppercase;
}

.eyebrow span{
    margin:0 7px;
    color:var(--hb-violet-bright);
}

.surface-card{
    border:1px solid var(--hb-border);
    border-radius:var(--hb-radius-lg);
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        var(--hb-charcoal);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        var(--hb-shadow-soft);
}

.storefront-page .button,
.storefront-page button{
    position:relative;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    box-sizing:border-box;
    padding:12px 20px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--hb-ivory);
    font-family:var(--hb-ui);
    font-size:14px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    isolation:isolate;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}

.storefront-page a.button{
    padding:12px 20px;
    border-radius:12px;
    color:var(--hb-ivory);
    text-decoration:none;
}

.storefront-page a.button:hover{
    color:#fff;
    text-decoration:none;
}

.storefront-page .button:hover:not(.disabled-button),
.storefront-page button:hover:not(:disabled){
    transform:translateY(-2px);
}

.storefront-page .button:active:not(.disabled-button),
.storefront-page button:active:not(:disabled){
    transform:translateY(0);
}

.storefront-page .button:focus-visible,
.storefront-page button:focus-visible{
    outline:3px solid rgba(197,168,255,.34);
    outline-offset:3px;
}

.storefront-page .button-primary{
    border-color:rgba(213,186,255,.38);
    background:
        linear-gradient(135deg, #6e35c6 0%, #4b238e 52%, #7e47d7 100%);
    color:#fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 10px 25px rgba(79,35,148,.24);
}

.storefront-page .button-primary::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-35%;
    left:-58%;
    width:34%;
    height:170%;
    pointer-events:none;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        rgba(238,217,255,.76),
        rgba(255,232,177,.26),
        transparent
    );
    filter:blur(1px);
    opacity:0;
    transform:skewX(-20deg);
}

.storefront-page .button-primary::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-2px;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    box-shadow:0 0 30px rgba(156,108,255,.72);
}

.storefront-page .button-primary:hover::before,
.storefront-page .button-primary:focus-visible::before{
    animation:hb-button-sweep .82s cubic-bezier(.2,.7,.2,1) 1 forwards;
}

.storefront-page .button-primary:hover::after,
.storefront-page .button-primary:focus-visible::after{
    animation:hb-button-bloom .82s ease-out 1 forwards;
}

.storefront-page .button-primary:hover,
.storefront-page .button-primary:focus-visible{
    border-color:rgba(232,207,255,.68);
    background:
        linear-gradient(135deg, #7d43d7 0%, #54269d 52%, #8954dc 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 14px 32px rgba(89,40,164,.32);
}

.storefront-page .button-secondary{
    border-color:rgba(201,169,107,.38);
    background:rgba(201,169,107,.055);
    color:var(--hb-gold-bright);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.storefront-page .button-secondary:hover,
.storefront-page .button-secondary:focus-visible{
    border-color:rgba(232,207,151,.66);
    background:rgba(201,169,107,.11);
    color:#fff7e4;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.button-small{
    min-height:42px;
    padding:10px 15px !important;
    font-size:13px;
}

.storefront-page .disabled-button,
.storefront-page button:disabled{
    border-color:rgba(255,255,255,.08);
    background:#27232d;
    color:#817a89;
    box-shadow:none;
    cursor:not-allowed;
    opacity:1;
}

@keyframes hb-button-sweep{
    0%{
        left:-58%;
        opacity:0;
    }
    18%{
        opacity:.9;
    }
    78%{
        opacity:.55;
    }
    100%{
        left:132%;
        opacity:0;
    }
}

@keyframes hb-button-bloom{
    0%{
        opacity:0;
        transform:scale(.96);
    }
    38%{
        opacity:.65;
    }
    100%{
        opacity:0;
        transform:scale(1.04);
    }
}

.store-section{
    position:relative;
    padding:94px 0;
}

.store-section--muted{
    border-top:1px solid rgba(226,207,255,.07);
    border-bottom:1px solid rgba(226,207,255,.07);
    background:rgba(255,255,255,.012);
}

.section-heading{
    display:grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(280px, .65fr);
    align-items:end;
    gap:70px;
    margin-bottom:42px;
}

.section-heading h2,
.catalog-toolbar h2{
    margin:0;
}

.section-heading > p,
.catalog-toolbar > p{
    max-width:480px;
    margin:0;
    color:var(--hb-muted);
    line-height:1.75;
}

/* Homepage */

.home-hero{
    position:relative;
    min-height:740px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-bottom:1px solid rgba(226,207,255,.08);
    background:#08070c;
    isolation:isolate;
}

.home-hero::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(8,7,12,.98) 0%,
            rgba(8,7,12,.91) 28%,
            rgba(8,7,12,.7) 48%,
            rgba(8,7,12,.22) 72%,
            rgba(8,7,12,.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(8,7,12,.82) 0%,
            transparent 28%,
            rgba(8,7,12,.2) 100%
        );
}

.home-hero::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 66% 31%,
            rgba(155,92,255,.13),
            transparent 23%
        ),
        linear-gradient(
            115deg,
            transparent 57%,
            rgba(201,169,107,.035) 72%,
            transparent 84%
        );
    mix-blend-mode:screen;
}

.home-hero__art{
    position:absolute;
    z-index:0;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.home-hero__art img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
    transform:scale(1.01);
}

.home-hero__layout{
    position:relative;
    z-index:2;
    display:block;
    padding-top:108px !important;
    padding-bottom:116px !important;
}

.home-hero__content{
    width:min(57%, 700px);
    max-width:700px;
}

.home-hero h1{
    max-width:700px;
    margin:0;
    text-shadow:0 3px 34px rgba(0,0,0,.7);
}

.home-hero h1 span{
    display:block;
    background:linear-gradient(90deg, var(--hb-gold-bright), #f7e8c0 52%, var(--hb-violet-bright));
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.home-hero__lead{
    max-width:620px;
    margin:26px 0 0;
    color:#c2bbc9;
    font-size:clamp(17px, 1.7vw, 20px);
    line-height:1.75;
    text-shadow:0 2px 22px rgba(0,0,0,.85);
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:34px;
}

.hero-assurances{
    display:flex;
    flex-wrap:wrap;
    gap:13px 24px;
    margin:28px 0 0;
    padding:0;
    color:var(--hb-muted);
    font-size:12px;
    font-weight:700;
    list-style:none;
}

.hero-assurances li{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.hero-assurances li span{
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    border:1px solid rgba(121,214,173,.28);
    border-radius:50%;
    background:rgba(121,214,173,.06);
    color:var(--hb-success);
    font-size:10px;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
}

.feature-card{
    position:relative;
    min-height:295px;
    display:flex;
    flex-direction:column;
    padding:28px;
    color:var(--hb-silver) !important;
    text-decoration:none;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.feature-card:hover,
.feature-card:focus-visible{
    border-color:var(--hb-border-strong);
    background:
        linear-gradient(145deg, rgba(156,108,255,.085), rgba(255,255,255,.018)),
        var(--hb-charcoal-raised);
    color:var(--hb-silver) !important;
    text-decoration:none;
    transform:translateY(-5px);
    box-shadow:var(--hb-shadow);
}

.feature-card:focus-visible{
    outline:3px solid rgba(197,168,255,.3);
    outline-offset:4px;
}

.feature-card__icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.3);
    border-radius:16px;
    background:rgba(201,169,107,.055);
    color:var(--hb-gold-bright);
}

.feature-card__icon svg,
.empty-state__icon svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.feature-card__copy{
    display:flex;
    flex-direction:column;
    margin-top:38px;
}

.feature-card__label{
    margin-bottom:8px;
    color:var(--hb-violet-bright);
    font-size:10px;
    font-weight:800;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.feature-card__copy strong{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-size:22px;
    line-height:1.25;
}

.feature-card__copy > span:last-child{
    margin-top:12px;
    color:var(--hb-muted);
    font-size:14px;
    line-height:1.7;
}

.feature-card__arrow{
    position:absolute;
    top:30px;
    right:30px;
    color:var(--hb-violet-bright);
    font-size:21px;
    transition:transform .25s ease;
}

.feature-card:hover .feature-card__arrow,
.feature-card:focus-visible .feature-card__arrow{
    transform:translateX(4px);
}

.journey-panel{
    display:grid;
    grid-template-columns:minmax(280px, .72fr) minmax(420px, 1.28fr);
    gap:75px;
    padding:48px !important;
}

.journey-panel__intro h2{
    margin:0;
    font-size:clamp(30px, 3.5vw, 43px);
}

.journey-panel__intro > p:last-child{
    margin:18px 0 0;
    color:var(--hb-muted);
}

.journey-steps{
    display:grid;
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
}

.journey-steps li{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:20px;
    padding:22px 0;
    border-bottom:1px solid rgba(226,207,255,.1);
}

.journey-steps li:first-child{
    padding-top:0;
}

.journey-steps li:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.journey-steps > li > span{
    color:var(--hb-gold);
    font-family:var(--hb-display);
    font-size:21px;
}

.journey-steps strong{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-size:20px;
}

.journey-steps p{
    margin:5px 0 0;
    color:var(--hb-muted);
    font-size:14px;
}

.store-section--closing{
    padding:75px 0;
    background:
        radial-gradient(circle at 18% 50%, rgba(116,59,216,.13), transparent 32%);
}

.closing-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

.closing-cta h2{
    margin:0;
    font-size:clamp(30px, 4vw, 46px);
}

/* Catalog */

.page-hero{
    position:relative;
    padding:86px 0 72px;
    overflow:hidden;
    border-bottom:1px solid rgba(226,207,255,.08);
    background:
        radial-gradient(circle at 84% 35%, rgba(122,63,226,.18), transparent 27%);
}

.page-hero::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    top:-175px;
    right:10%;
    border:1px solid rgba(201,169,107,.13);
    border-radius:50%;
    box-shadow:0 0 0 42px rgba(197,168,255,.025);
}

.page-hero__inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:60px;
}

.page-hero h1{
    margin:0;
    font-size:clamp(48px, 7vw, 76px);
}

.page-hero__inner > div:first-child > p:last-child{
    max-width:670px;
    margin:19px 0 0;
    color:var(--hb-muted);
    font-size:17px;
}

.page-hero__count{
    min-width:150px;
    padding:19px 22px;
    border:1px solid rgba(201,169,107,.2);
    border-radius:var(--hb-radius-md);
    background:rgba(201,169,107,.045);
    text-align:right;
}

.page-hero__count strong{
    display:block;
    color:var(--hb-gold-bright);
    font-family:var(--hb-display);
    font-size:36px;
    line-height:1;
}

.page-hero__count span{
    display:block;
    margin-top:7px;
    color:var(--hb-muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.catalog-section{
    min-height:430px;
}

.catalog-toolbar{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:34px;
}

.catalog-toolbar h2{
    font-size:clamp(30px, 4vw, 42px);
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:23px;
}

.storefront-page .product-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:0;
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.storefront-page .product-card:hover{
    border-color:var(--hb-border-strong);
    transform:translateY(-5px);
    box-shadow:var(--hb-shadow);
}

.product-card__media{
    position:relative;
    height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-bottom:1px solid rgba(226,207,255,.09);
    background:
        radial-gradient(circle at 50% 45%, rgba(127,70,225,.12), transparent 44%),
        #100e16;
}

.product-card__media:focus-visible{
    outline:3px solid rgba(197,168,255,.36);
    outline-offset:-4px;
}

.product-type-badge{
    position:absolute;
    z-index:2;
    top:17px;
    left:17px;
    display:inline-flex;
    align-items:center;
    min-height:27px;
    padding:5px 9px;
    border:1px solid rgba(201,169,107,.28);
    border-radius:999px;
    background:rgba(12,10,17,.78);
    color:var(--hb-gold-bright);
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    line-height:1;
    text-transform:uppercase;
    backdrop-filter:blur(10px);
}

.storefront-page .product-image{
    width:100%;
    height:100%;
    display:block;
    margin:0;
    padding:20px;
    border-radius:0;
    object-fit:contain;
    transition:transform .35s ease;
}

.product-card:hover .product-image{
    transform:scale(1.035);
}

.product-image-placeholder{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;
    color:#766d83;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.product-image-placeholder svg{
    width:48px;
    height:48px;
    fill:none;
    stroke:rgba(197,168,255,.38);
    stroke-width:1.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.product-card__body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:25px;
}

.product-card__heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.product-card__heading h2{
    margin:0;
    font-size:22px;
    line-height:1.27;
}

.storefront-page .product-title-link{
    color:var(--hb-ivory);
    text-decoration:none;
}

.storefront-page .product-title-link:hover,
.storefront-page .product-title-link:focus-visible{
    color:var(--hb-violet-bright);
    text-decoration:none;
}

.storefront-page .product-title-link:focus-visible{
    border-radius:3px;
    outline:3px solid rgba(197,168,255,.28);
    outline-offset:3px;
}

.storefront-page .product-price{
    flex:0 0 auto;
    margin:1px 0 0;
    color:var(--hb-gold-bright);
    font-family:var(--hb-display);
    font-size:22px;
    font-weight:700;
    line-height:1.25;
}

.product-card__description{
    display:-webkit-box;
    margin:16px 0 22px;
    overflow:hidden;
    color:var(--hb-muted);
    font-size:14px;
    line-height:1.65;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.product-card__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:auto;
    padding-top:19px;
    border-top:1px solid rgba(226,207,255,.09);
}

.storefront-page .product-card a.button{
    min-width:0;
    margin-top:0;
}

.availability{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--hb-silver);
    font-size:11px;
    font-weight:800;
    letter-spacing:.025em;
}

.availability > span{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 10px currentColor;
}

.availability.is-available{
    color:var(--hb-success);
}

.availability.is-unavailable{
    color:var(--hb-danger);
}

.availability.is-service{
    color:var(--hb-violet-bright);
}

.empty-state{
    max-width:780px;
    margin:12px auto;
    padding:64px 48px;
    text-align:center;
}

.empty-state__icon{
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    margin:0 auto 28px;
    border:1px solid rgba(201,169,107,.28);
    border-radius:22px;
    background:rgba(201,169,107,.055);
    color:var(--hb-gold-bright);
    box-shadow:0 0 32px rgba(121,65,225,.1);
}

.empty-state h1,
.empty-state h2{
    margin:0;
    font-size:clamp(32px, 5vw, 47px);
}

.empty-state > p:not(.eyebrow){
    max-width:570px;
    margin:18px auto 0;
    color:var(--hb-muted);
}

.empty-state__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:30px;
}

/* Product detail */

.product-detail-section{
    padding:54px 0 92px;
}

.product-not-found-section{
    min-height:620px;
    display:flex;
    align-items:center;
}

.breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:30px;
    color:#6f6878;
    font-size:12px;
    font-weight:700;
}

.breadcrumbs a{
    color:var(--hb-muted);
    text-decoration:none;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible{
    color:var(--hb-violet-bright);
}

.breadcrumbs a:focus-visible{
    border-radius:3px;
    outline:3px solid rgba(197,168,255,.25);
    outline-offset:3px;
}

.breadcrumbs span[aria-current="page"]{
    max-width:360px;
    overflow:hidden;
    color:var(--hb-silver);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.storefront-page .product-details{
    display:grid;
    grid-template-columns:minmax(350px, .94fr) minmax(390px, 1.06fr);
    gap:30px;
    align-items:stretch;
    padding:0;
}

.storefront-page .product-details-image{
    position:relative;
    min-height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:34px;
    background:
        radial-gradient(circle at 50% 45%, rgba(128,70,226,.14), transparent 43%),
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
        #100e16;
}

.storefront-page .product-details-image img{
    width:100%;
    max-height:540px;
    display:block;
    border-radius:0;
    background:transparent;
    object-fit:contain;
}

.storefront-page .product-details-placeholder{
    width:100%;
    min-height:430px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#766d83;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.product-details-placeholder svg{
    width:65px;
    height:65px;
    fill:none;
    stroke:rgba(197,168,255,.34);
    stroke-width:1.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.storefront-page .product-details-content{
    display:flex;
    flex-direction:column;
    padding:48px;
}

.storefront-page .back-link{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:34px;
    color:var(--hb-muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.03em;
    text-decoration:none;
}

.storefront-page .back-link:hover,
.storefront-page .back-link:focus-visible{
    color:var(--hb-violet-bright);
    text-decoration:none;
}

.storefront-page .back-link:focus-visible{
    border-radius:3px;
    outline:3px solid rgba(197,168,255,.25);
    outline-offset:4px;
}

.storefront-page .product-details-content h1{
    margin:0;
    font-size:clamp(38px, 5vw, 58px);
}

.storefront-page .product-details-price{
    margin:22px 0 0;
    color:var(--hb-gold-bright);
    font-family:var(--hb-display);
    font-size:clamp(29px, 4vw, 39px);
    font-weight:700;
}

.product-detail-divider{
    height:1px;
    margin:28px 0;
    background:linear-gradient(90deg, rgba(201,169,107,.32), rgba(197,168,255,.09), transparent);
}

.storefront-page .product-details-description{
    margin:0;
}

.storefront-page .product-details-description h2{
    margin:0 0 12px;
    color:var(--hb-gold-bright);
    font-family:var(--hb-ui);
    font-size:11px;
    font-weight:800;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.storefront-page .product-details-description > div{
    color:#b5adbf;
    line-height:1.8;
}

.product-purchase-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-top:auto;
    padding-top:34px;
}

.product-purchase-panel > div{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.product-purchase-panel__label{
    color:#7e7688;
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.storefront-page .product-request-button{
    flex:0 0 auto;
    border:1px solid rgba(213,186,255,.38);
}

.product-request-note{
    margin:18px 0 0;
    padding-top:16px;
    border-top:1px solid rgba(226,207,255,.08);
    color:#766f7f;
    font-size:11px;
}

.product-confidence-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
    margin-top:25px;
}

.product-confidence-item{
    display:grid;
    grid-template-columns:35px 1fr;
    gap:15px;
    padding:22px 24px;
    border:1px solid rgba(226,207,255,.08);
    border-radius:var(--hb-radius-md);
    background:rgba(255,255,255,.018);
}

.product-confidence-item > span{
    color:var(--hb-gold);
    font-family:var(--hb-display);
    font-size:17px;
}

.product-confidence-item strong{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-size:17px;
}

.product-confidence-item p{
    margin:5px 0 0;
    color:var(--hb-muted);
    font-size:12px;
    line-height:1.6;
}

.product-confidence-item a{
    color:var(--hb-violet-bright);
}

/* Shared component focus treatment for future public phases. */

.storefront-page input:focus-visible,
.storefront-page textarea:focus-visible,
.storefront-page select:focus-visible{
    border-color:var(--hb-violet-bright);
    outline:3px solid rgba(197,168,255,.22);
    outline-offset:2px;
    box-shadow:0 0 0 1px rgba(197,168,255,.1);
}

@media(max-width:1120px){

    .site-header__inner{
        gap:18px;
    }

    .site-brand__tagline{
        display:none;
    }

    .site-nav__link,
    .site-nav__account{
        padding-right:8px;
        padding-left:8px;
        font-size:12px;
    }

    .home-hero__content{
        width:min(62%, 660px);
    }

    .product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .storefront-page .product-details-content{
        padding:38px;
    }

    .product-purchase-panel{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(min-width:981px){

    .site-nav-shell > .site-nav{
        display:flex !important;
    }
}

@media(max-width:980px){

    .site-header__inner{
        min-height:74px;
    }

    .site-nav-shell{
        margin-left:auto;
    }

    .site-nav-toggle{
        min-height:42px;
        display:inline-flex;
        align-items:center;
        gap:9px;
        padding:9px 12px;
        border:1px solid rgba(226,207,255,.18);
        border-radius:10px;
        background:rgba(255,255,255,.035);
        color:var(--hb-silver);
        font-family:var(--hb-ui);
        font-size:12px;
        font-weight:800;
        cursor:pointer;
    }

    .site-nav-toggle svg{
        width:19px;
        height:19px;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
    }

    .site-nav-shell:not([open]) > .site-nav{
        display:none;
    }

    .site-nav-shell[open] > .site-nav{
        position:absolute;
        top:calc(100% - 4px);
        right:0;
        width:min(360px, calc(100vw - 28px));
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:7px;
        padding:14px;
        border:1px solid rgba(226,207,255,.18);
        border-radius:var(--hb-radius-md);
        background:#0e0c14;
        box-shadow:0 24px 60px rgba(0,0,0,.48);
        backdrop-filter:blur(18px);
    }

    .site-nav-shell[open] .site-nav__link,
    .site-nav-shell[open] .site-nav__account{
        min-height:45px;
        justify-content:flex-start;
        padding:10px 12px;
        border-color:rgba(226,207,255,.08);
        background:rgba(255,255,255,.022);
        white-space:normal;
    }

    .site-nav-shell[open] .site-nav__account{
        margin-left:0;
    }

    .site-nav__divider{
        display:none;
    }

    .home-hero{
        min-height:690px;
    }

    .home-hero__layout{
        padding-top:80px !important;
        padding-bottom:80px !important;
    }

    .home-hero__content{
        width:min(69%, 620px);
    }

    .home-hero__art img{
        object-position:62% center;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .feature-card{
        min-height:240px;
    }

    .journey-panel{
        grid-template-columns:1fr;
        gap:45px;
    }

    .storefront-page .product-details{
        grid-template-columns:1fr;
    }

    .storefront-page .product-details-image{
        min-height:500px;
    }

    .product-confidence-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:760px){

    .site-footer__inner{
        grid-template-columns:1fr;
        gap:42px;
        padding-top:52px;
    }

    .voyage-note__message{
        padding:27px 25px;
    }

    .home-hero{
        min-height:720px;
    }

    .home-hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(8,7,12,.97) 0%,
                rgba(8,7,12,.9) 54%,
                rgba(8,7,12,.64) 100%
            ),
            linear-gradient(
                0deg,
                rgba(8,7,12,.92) 0%,
                rgba(8,7,12,.25) 58%,
                rgba(8,7,12,.48) 100%
            );
    }

    .home-hero__content{
        width:100%;
        max-width:620px;
    }

    .home-hero__art img{
        object-position:69% center;
        opacity:.58;
    }

    .store-section{
        padding:70px 0;
    }

    .section-heading{
        grid-template-columns:1fr;
        gap:20px;
    }

    .journey-panel{
        padding:32px !important;
    }

    .closing-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .page-hero{
        padding:68px 0 58px;
    }

    .page-hero__inner{
        align-items:flex-start;
        flex-direction:column;
        gap:30px;
    }

    .page-hero__count{
        min-width:0;
        display:flex;
        align-items:baseline;
        gap:10px;
        padding:13px 16px;
        text-align:left;
    }

    .page-hero__count strong{
        font-size:27px;
    }

    .page-hero__count span{
        margin:0;
    }

    .catalog-toolbar{
        align-items:flex-start;
        flex-direction:column;
        gap:15px;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .storefront-page .product-details-image{
        min-height:390px;
        padding:24px;
    }

    .storefront-page .product-details-placeholder{
        min-height:320px;
    }

    .storefront-page .product-details-content{
        padding:32px;
    }
}

@media(max-width:540px){

    .site-header__inner{
        width:calc(100% - 28px);
    }

    .site-brand{
        min-width:0;
        gap:9px;
    }

    .site-brand__sigil{
        width:40px;
        height:40px;
        flex-basis:40px;
        border-radius:13px;
    }

    .site-brand__sigil svg{
        width:20px;
        height:20px;
    }

    .site-brand__name{
        font-size:18px;
        line-height:1.05;
    }

    .site-nav-toggle span{
        display:none;
    }

    .site-nav-shell[open] > .site-nav{
        left:0;
        width:100%;
        grid-template-columns:1fr;
    }

    .site-nav__link::after{
        display:none;
    }

    .site-footer__links{
        grid-template-columns:1fr;
        gap:28px;
    }

    .storefront-page .container{
        width:calc(100% - 32px);
    }

    .home-hero__layout{
        padding-top:62px !important;
        padding-bottom:72px !important;
    }

    .home-hero h1{
        font-size:clamp(39px, 12vw, 54px);
    }

    .home-hero__art img{
        object-position:92% center;
        opacity:.72;
    }

    .hero-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .hero-actions .button{
        width:100%;
    }

    .voyage-note__message{
        padding:24px 19px;
        font-size:12px;
    }

    .feature-card{
        min-height:265px;
        padding:24px;
    }

    .journey-panel{
        padding:26px !important;
    }

    .journey-steps li{
        grid-template-columns:40px 1fr;
        gap:13px;
    }

    .page-hero h1{
        font-size:45px;
    }

    .product-card__heading,
    .product-card__footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .product-card__footer .button{
        width:100%;
    }

    .empty-state{
        padding:44px 24px;
    }

    .empty-state__actions{
        align-items:stretch;
        flex-direction:column;
    }

    .storefront-page .product-details-image{
        min-height:330px;
    }

    .storefront-page .product-details-content{
        padding:26px;
    }

    .product-purchase-panel .button,
    .product-purchase-panel button{
        width:100%;
    }

    .breadcrumbs span[aria-current="page"]{
        max-width:170px;
    }
}

@media(prefers-reduced-motion:reduce){

    .site-header *,
    .site-footer *,
    .storefront-page *{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .storefront-page .button-primary::before,
    .storefront-page .button-primary::after{
        display:none;
    }

    .storefront-page .button:hover,
    .feature-card:hover,
    .product-card:hover{
        transform:none !important;
    }
}

/* =========================================================
   Phase 3: The Two Realms
   Customer Realm + Staff Command
   ========================================================= */

/* Shared authenticated navigation -------------------------------- */

.site-nav__realm{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 10px;
    border:1px solid rgba(201,169,107,.24);
    border-radius:999px;
    background:rgba(201,169,107,.055);
    color:var(--hb-gold-bright);
    font-size:9px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
    white-space:nowrap;
}

.site-nav__realm::before{
    content:"✦";
    color:var(--hb-violet-bright);
    font-size:9px;
}

.site-nav__account--logout{
    border-color:rgba(255,143,155,.2) !important;
    background:rgba(122,35,50,.09) !important;
}

.site-nav__account--logout:hover,
.site-nav__account--logout:focus-visible{
    border-color:rgba(255,143,155,.38) !important;
    background:rgba(122,35,50,.18) !important;
}

/* Customer Realm foundation -------------------------------------- */

.customer-realm-page,
.customer-realm-page *{
    box-sizing:border-box;
}

.customer-realm-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 78% 3%, rgba(123,66,222,.2), transparent 28%),
        radial-gradient(circle at 9% 34%, rgba(201,169,107,.065), transparent 24%),
        linear-gradient(180deg, #09070e 0%, #100c17 45%, #08070c 100%);
    color:var(--hb-silver);
    font-family:var(--hb-ui);
    font-size:15px;
    line-height:1.65;
}

.customer-realm-page::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:84px 0 auto;
    height:520px;
    pointer-events:none;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(201,169,107,.035) 50%, transparent 50.2%),
        linear-gradient(rgba(197,168,255,.018) 1px, transparent 1px);
    background-size:100% 100%, 100% 74px;
    mask-image:linear-gradient(to bottom, black, transparent);
}

.customer-realm-page > main{
    width:min(calc(100% - 44px), 1320px);
    max-width:1320px;
    flex:1 0 auto;
    margin:0 auto;
    padding:0 0 84px;
}

.customer-realm-page h1,
.customer-realm-page h2,
.customer-realm-page h3{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    line-height:1.16;
    text-wrap:balance;
}

.customer-realm-page h1{
    letter-spacing:-.03em;
}

.customer-realm-page a{
    color:var(--hb-violet-bright);
    text-underline-offset:3px;
}

.customer-realm-page .card{
    border:1px solid rgba(218,200,235,.13);
    border-radius:18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.009)),
        rgba(15,12,21,.92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 18px 52px rgba(0,0,0,.24);
    color:var(--hb-silver);
}

.customer-realm-page button,
.customer-realm-page a.button{
    display:inline-flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border:1px solid rgba(205,181,255,.34);
    border-radius:10px;
    background:linear-gradient(135deg, #7040c7, #9362e5 58%, #653bb5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.17), 0 9px 24px rgba(82,35,157,.2);
    color:#fff;
    font:750 13px/1.2 var(--hb-ui);
    text-align:center;
    text-decoration:none;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.customer-realm-page button:hover,
.customer-realm-page button:focus-visible,
.customer-realm-page a.button:hover,
.customer-realm-page a.button:focus-visible{
    border-color:rgba(231,216,255,.72);
    background:linear-gradient(135deg, #7c4bd1, #a373ed 58%, #7145c2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 13px 30px rgba(82,35,157,.3), 0 0 24px rgba(156,108,255,.13);
    color:#fff;
    transform:translateY(-1px);
}

.customer-realm-page button:focus-visible,
.customer-realm-page a:focus-visible{
    outline:3px solid rgba(197,168,255,.3);
    outline-offset:3px;
}

.customer-realm-page .message{
    border-radius:13px;
    font-size:13px;
    line-height:1.55;
}

.customer-realm-page .message.success{
    border:1px solid rgba(121,214,173,.24);
    background:rgba(35,118,84,.12);
    color:#b6e6ce;
}

.customer-realm-page .message.error{
    border:1px solid rgba(255,143,155,.3);
    background:rgba(136,38,52,.16);
    color:#ffc1c8;
}

.customer-realm-eyebrow,
.customer-section-kicker{
    margin:0 0 8px !important;
    color:var(--hb-gold-bright) !important;
    font:800 10px/1.2 var(--hb-ui) !important;
    letter-spacing:.18em;
    text-transform:uppercase;
}

/* Customer dashboard --------------------------------------------- */

.customer-realm-page .customer-realm-hero{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    gap:24px;
    align-items:center;
    overflow:hidden;
    margin:40px 0 22px;
    padding:36px 38px;
    border:1px solid rgba(201,169,107,.18);
    border-radius:24px;
    background:
        radial-gradient(circle at 88% 20%, rgba(134,77,229,.18), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.035), transparent 50%),
        rgba(15,12,21,.88);
    box-shadow:var(--hb-shadow);
}

.customer-realm-page .customer-realm-hero::before{
    content:"";
    position:absolute;
    right:-70px;
    bottom:-160px;
    width:330px;
    height:330px;
    border:1px solid rgba(201,169,107,.09);
    border-radius:50%;
    box-shadow:0 0 0 42px rgba(197,168,255,.025), 0 0 0 84px rgba(201,169,107,.015);
    pointer-events:none;
}

.customer-realm-hero__crest{
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.45);
    border-radius:20px;
    background:radial-gradient(circle, rgba(156,108,255,.2), transparent 70%), #100d17;
    box-shadow:0 0 0 7px rgba(201,169,107,.025), 0 0 28px rgba(156,108,255,.13);
    color:var(--hb-gold-bright);
    font-family:var(--hb-display);
    font-size:17px;
    letter-spacing:.08em;
    transform:rotate(45deg);
}

.customer-realm-hero__crest span{
    transform:rotate(-45deg);
}

.customer-realm-page .customer-realm-hero h1{
    margin:0 0 9px;
    font-size:clamp(36px, 4.4vw, 58px);
}

.customer-realm-page .customer-realm-hero__copy > p:last-child{
    max-width:700px;
    margin:0;
    color:#a49dac;
}

.customer-realm-hero__seal{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:190px;
    padding:12px 14px;
    border:1px solid rgba(121,214,173,.2);
    border-radius:14px;
    background:rgba(31,106,76,.09);
}

.customer-realm-hero__seal-mark{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.3);
    border-radius:50%;
    color:var(--hb-gold-bright);
}

.customer-realm-hero__seal small,
.customer-realm-hero__seal strong{
    display:block;
}

.customer-realm-hero__seal small{
    color:#7f7888;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.customer-realm-hero__seal strong{
    margin-top:2px;
    color:#b7e6cf;
    font-size:12px;
}

.customer-realm-page .customer-dashboard-grid{
    gap:15px;
    margin-bottom:24px;
}

.customer-realm-page .customer-stat-card{
    position:relative;
    min-height:154px;
    overflow:hidden;
    padding:21px 22px;
    border-radius:16px;
}

.customer-realm-page .customer-stat-card::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--realm-accent, var(--hb-violet));
    box-shadow:0 0 18px var(--realm-accent, var(--hb-violet));
}

.customer-stat-card--support{ --realm-accent:#9c6cff; }
.customer-stat-card--requests{ --realm-accent:#c9a96b; }
.customer-stat-card--seal{ --realm-accent:#79d6ad; }

.customer-realm-page .customer-stat-label{
    color:#92899d;
    font-size:10px;
    letter-spacing:.14em;
}

.customer-realm-page .customer-stat-number{
    margin:13px 0;
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-size:42px;
    font-weight:700;
}

.customer-realm-page .customer-stat-seal{
    color:#a9e7ca;
    font-family:var(--hb-ui);
    font-size:24px;
}

.customer-realm-page .customer-section{
    margin-bottom:24px;
    padding:28px;
}

.customer-realm-page .customer-section-heading{
    align-items:center;
    margin-bottom:20px;
}

.customer-realm-page .customer-section-heading h2{
    margin:0 0 6px;
    font-size:29px;
}

.customer-realm-page .customer-section-heading p:not(.customer-section-kicker){
    color:#918a99;
}

.customer-realm-page .customer-action-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:13px;
}

.customer-realm-page .customer-action-card{
    position:relative;
    min-height:235px;
    overflow:hidden;
    padding:21px;
    border-color:rgba(218,200,235,.1);
    background:rgba(255,255,255,.018);
    box-shadow:none;
}

.customer-realm-page .customer-action-card::after{
    content:"";
    position:absolute;
    right:-35px;
    bottom:-58px;
    width:120px;
    height:120px;
    border:1px solid rgba(197,168,255,.08);
    border-radius:50%;
    pointer-events:none;
}

.customer-action-sigil{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    border:1px solid rgba(201,169,107,.26);
    border-radius:11px;
    background:rgba(156,108,255,.07);
    color:var(--hb-gold-bright);
}

.customer-realm-page .customer-action-card h3{
    margin:0 0 8px;
    font-size:21px;
}

.customer-realm-page .customer-action-card p{
    color:#918a99;
    font-size:13px;
}

.customer-realm-page .customer-action-card .button{
    width:100%;
    margin-top:18px;
    border-color:rgba(201,169,107,.24);
    background:rgba(201,169,107,.055);
    box-shadow:none;
    color:var(--hb-gold-bright);
}

.customer-realm-page .customer-action-card .button:hover,
.customer-realm-page .customer-action-card .button:focus-visible{
    background:rgba(156,108,255,.13);
    color:#fff;
}

.customer-realm-page .customer-table-wrapper{
    border:1px solid rgba(218,200,235,.1);
    border-radius:13px;
    background:rgba(3,3,6,.2);
}

.customer-realm-page .customer-history-table{
    color:#c9c2d1;
}

.customer-realm-page .customer-history-table th{
    border-bottom:1px solid rgba(201,169,107,.16);
    background:rgba(201,169,107,.035);
    color:#9a92a3;
    font-size:10px;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.customer-realm-page .customer-history-table td{
    border-bottom:1px solid rgba(218,200,235,.08);
}

.customer-realm-page .customer-history-table tbody tr:hover{
    background:rgba(156,108,255,.045);
}

.customer-realm-page .customer-status{
    border-color:rgba(197,168,255,.2);
    background:rgba(156,108,255,.07);
    color:#d5c7ec;
}

.customer-realm-page .customer-account-item{
    padding:17px;
    border-color:rgba(218,200,235,.11);
    border-radius:12px;
    background:rgba(255,255,255,.018);
}

.customer-realm-page .customer-account-label{
    color:#81798b;
    opacity:1;
}

.customer-empty-state{
    display:grid;
    justify-items:center;
    padding:38px 22px;
    border:1px dashed rgba(201,169,107,.18);
    border-radius:14px;
    background:rgba(201,169,107,.025);
    text-align:center;
}

.customer-empty-state > span{
    color:var(--hb-gold);
    font-size:18px;
}

.customer-empty-state h3{
    margin:11px 0 4px;
}

.customer-empty-state p{
    max-width:570px;
    margin:0 0 17px;
    color:#918a99;
}

.customer-realm-page .customer-future-card{
    padding:22px;
    border-style:dashed;
    opacity:.72;
}

.customer-realm-page .customer-coming-soon{
    color:var(--hb-gold);
}

/* Customer digital vault and reveal ------------------------------ */

.customer-realm-page .customer-vault-heading{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:22px;
    align-items:center;
    margin:42px 0 24px;
    padding:0;
}

.customer-vault-heading__crest,
.customer-reveal-crest{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.36);
    border-radius:50%;
    background:radial-gradient(circle, rgba(156,108,255,.18), transparent 72%);
    box-shadow:0 0 0 7px rgba(201,169,107,.02), 0 0 28px rgba(156,108,255,.1);
    color:var(--hb-gold-bright);
    font-size:20px;
}

.customer-realm-page .customer-vault-heading h1{
    margin:0 0 7px;
    font-size:clamp(36px, 4vw, 52px);
}

.customer-realm-page .customer-vault-heading p:last-child{
    max-width:780px;
    margin:0;
    color:#9991a2;
}

.customer-vault-notices{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:13px;
    margin-bottom:24px;
}

.customer-realm-page .customer-vault-notices .digital-security-note{
    margin:0;
    padding:16px 18px;
}

.customer-vault-notices strong{
    display:block;
    margin-bottom:3px;
    color:#d7f1e4;
}

.customer-realm-page .digital-product-card{
    position:relative;
    overflow:hidden;
    padding:28px;
    border-color:rgba(201,169,107,.16);
}

.customer-realm-page .digital-product-card::before{
    content:"";
    position:absolute;
    top:0;
    right:12%;
    left:12%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,207,151,.54), transparent);
}

.customer-realm-page .digital-product-image{
    border-color:rgba(201,169,107,.18);
    background:#09070d;
    box-shadow:0 14px 34px rgba(0,0,0,.26);
}

.customer-realm-page .digital-product-placeholder{
    border-color:rgba(201,169,107,.22);
    background:rgba(201,169,107,.025);
    color:#82798a;
}

.customer-realm-page .digital-assignment{
    position:relative;
    border-color:rgba(218,200,235,.11);
    border-radius:14px;
    background:rgba(3,3,6,.22);
}

.customer-realm-page .digital-assignment::before{
    content:"";
    position:absolute;
    top:14px;
    bottom:14px;
    left:0;
    width:2px;
    background:linear-gradient(var(--hb-violet), rgba(201,169,107,.35));
}

.customer-realm-page .digital-status,
.customer-realm-page .digital-status-pill{
    border-color:rgba(197,168,255,.22);
    background:rgba(156,108,255,.08);
    color:#d8c9ef;
}

.customer-realm-page .digital-meta-box{
    background:rgba(255,255,255,.022);
}

.customer-realm-page .digital-meta-label{
    color:#827a8b;
    opacity:1;
}

.customer-realm-page .digital-replacement,
.customer-realm-page .digital-legacy-note{
    border-color:rgba(201,169,107,.28);
    background:rgba(201,169,107,.035);
}

.customer-realm-page .digital-muted{
    color:#8e8697;
    opacity:1;
}

.customer-vault-empty{
    padding:48px !important;
    text-align:center;
}

.customer-realm-page .reveal-wrapper{
    width:min(100%, 820px);
    margin:44px auto 72px;
}

.customer-realm-page .reveal-wrapper > .card{
    position:relative;
    overflow:hidden;
    padding:38px;
    border-color:rgba(201,169,107,.19);
}

.customer-realm-page .reveal-wrapper > .card::before{
    content:"";
    position:absolute;
    inset:0 12% auto;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,207,151,.6), transparent);
}

.customer-realm-page .customer-reveal-crest{
    margin-bottom:20px;
}

.customer-realm-page .reveal-wrapper h1{
    margin:0 0 20px;
    font-size:clamp(34px, 4vw, 48px);
}

.customer-realm-page .reveal-meta > div{
    border-color:rgba(218,200,235,.11);
    background:rgba(255,255,255,.018);
}

.customer-realm-page .reveal-secret{
    border-color:rgba(201,169,107,.5);
    background:#050407;
    box-shadow:inset 0 0 26px rgba(156,108,255,.07);
    color:#fff4d4;
}

.customer-realm-page input,
.customer-realm-page textarea,
.customer-realm-page select{
    border-color:rgba(218,200,235,.2);
    background:rgba(5,4,8,.62);
    color:var(--hb-ivory);
}

.customer-realm-page input:focus-visible,
.customer-realm-page textarea:focus-visible,
.customer-realm-page select:focus-visible{
    border-color:rgba(197,168,255,.72);
    outline:3px solid rgba(156,108,255,.15);
    box-shadow:0 0 25px rgba(156,108,255,.1);
}

/* Reset and product request finish the customer auth family. */

.auth-page--reset .auth-alternate .button{
    border-color:rgba(201,169,107,.3);
    background:rgba(201,169,107,.07);
    box-shadow:none;
    color:var(--hb-gold-bright);
}

.customer-request-shell{
    min-height:680px;
    display:grid;
    place-items:center;
    padding-top:64px !important;
    padding-bottom:76px !important;
}

.customer-request-page .request-form-card{
    width:min(100%, 720px);
    max-width:720px;
    margin:0;
    padding:44px;
}

.customer-request-page .request-form-card h1{
    margin:17px 0 8px;
    font-size:clamp(34px, 5vw, 47px);
}

.customer-request-page .request-form-card > p{
    color:#9991a2;
}

.customer-request-page .back-link{
    color:var(--hb-gold-bright);
    font-size:12px;
    font-weight:750;
    text-decoration:none;
}

/* Phase 2 support remnants: dark reply controls, no legacy blue. */

.ticket-page .customer-ticket-reply label{
    color:#e1dbe8;
    font-size:13px;
}

.ticket-page .customer-ticket-reply textarea,
.ticket-page .customer-ticket-reply input[type="file"]{
    width:100%;
    margin:0;
    border:1px solid rgba(211,196,226,.2);
    border-radius:11px;
    background:rgba(5,4,8,.62);
    color:#f4eff9;
    font:inherit;
}

.ticket-page .customer-ticket-reply textarea{
    min-height:150px;
    padding:13px 14px;
}

.ticket-page .customer-ticket-reply input[type="file"]{
    min-height:62px;
    padding:8px;
    border-style:dashed;
}

.ticket-page .customer-ticket-reply textarea:focus-visible,
.ticket-page .customer-ticket-reply input[type="file"]:focus-visible{
    border-color:rgba(197,168,255,.76);
    outline:3px solid rgba(156,108,255,.15);
    box-shadow:0 0 28px rgba(114,56,218,.11);
}

.ticket-page .customer-ticket-reply input[type="file"]::file-selector-button{
    min-height:42px;
    margin-right:12px;
    padding:9px 14px;
    border:1px solid rgba(201,169,107,.38);
    border-radius:8px;
    background:rgba(201,169,107,.09);
    color:var(--hb-gold-bright);
    cursor:pointer;
}

/* Staff Command foundation --------------------------------------- */

.staff-command-document{
    background:#07070a;
}

.staff-command-page,
.staff-command-page *{
    box-sizing:border-box;
}

.staff-command-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 86% 0%, rgba(103,54,183,.14), transparent 25%),
        linear-gradient(90deg, transparent 49.9%, rgba(201,169,107,.018) 50%, transparent 50.1%),
        repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,255,255,.012) 60px),
        #09090d;
    color:#c3bdcb;
    font-family:var(--hb-ui);
    font-size:14px;
    line-height:1.55;
}

.staff-command-page > main.container{
    width:min(calc(100% - 46px), 1540px);
    max-width:1540px;
    flex:1 0 auto;
    margin:0 auto;
    padding:34px 0 62px;
}

.staff-command-page main,
.staff-command-page section,
.staff-command-page .card,
.staff-command-page [class$="-grid"]{
    min-width:0;
}

.staff-command-page img{
    max-width:100%;
}

.staff-command-page h1,
.staff-command-page h2,
.staff-command-page h3{
    color:#f2eef6;
    font-family:var(--hb-display);
    line-height:1.16;
    text-wrap:balance;
}

.staff-command-page h1{
    letter-spacing:-.025em;
}

.staff-command-page a{
    color:#c5a8ff;
    text-underline-offset:3px;
}

.staff-command-page .card{
    border:1px solid rgba(214,202,225,.12);
    border-radius:14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.025), rgba(255,255,255,.006)),
        rgba(14,13,18,.95);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 16px 42px rgba(0,0,0,.2);
    color:#c3bdcb;
}

.staff-command-page .message{
    border-radius:10px;
    font-size:13px;
    line-height:1.5;
}

.staff-command-page .message.success{
    border:1px solid rgba(121,214,173,.25);
    background:rgba(28,111,77,.14);
    color:#b0e6ca;
}

.staff-command-page .message.error{
    border:1px solid rgba(255,143,155,.3);
    background:rgba(132,35,49,.17);
    color:#ffc0c7;
}

/* Staff command header: darker, sharper, role aware. */

.staff-command-page .staff-site-header{
    padding:0;
    border-bottom:1px solid rgba(201,169,107,.16);
    background:
        radial-gradient(circle at 18% -120%, rgba(143,88,236,.2), transparent 38%),
        linear-gradient(180deg, rgba(15,14,20,.99), rgba(9,9,13,.98));
    box-shadow:0 18px 48px rgba(0,0,0,.32);
}

.staff-command-page .staff-header-inner{
    width:min(calc(100% - 46px), 1540px);
    max-width:1540px;
    padding:13px 0 10px;
}

.staff-command-page .staff-brand{
    color:#f5f1fb;
}

.staff-command-page .staff-brand-mark{
    border-color:rgba(201,169,107,.38);
    border-radius:12px;
    background:linear-gradient(145deg, rgba(156,108,255,.14), rgba(255,255,255,.015));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 22px rgba(156,108,255,.1);
    color:var(--hb-gold-bright);
}

.staff-command-page .staff-brand-name{
    color:#f5f1fb;
    font-family:var(--hb-display);
    font-size:24px;
    font-weight:700;
    letter-spacing:-.02em;
}

.staff-command-page .staff-brand-name em{
    color:var(--hb-gold);
    font-size:.76em;
    font-style:normal;
}

.staff-command-page .staff-brand-subtitle{
    color:#807987;
}

.staff-command-page .staff-role-chip{
    gap:7px;
    border-color:rgba(197,168,255,.22);
    background:rgba(156,108,255,.07);
    color:#d7cae8;
}

.staff-role-chip__crest{
    color:#9c6cff;
    font-size:8px;
}

.staff-command-page .staff-role-chip.role-owner{
    border-color:rgba(232,207,151,.4);
    background:rgba(201,169,107,.09);
    color:#f0dca9;
    box-shadow:inset 0 0 14px rgba(201,169,107,.035);
}

.staff-command-page .staff-role-chip.role-owner .staff-role-chip__crest{
    color:var(--hb-gold-bright);
}

.staff-command-page .staff-header-utility{
    border-color:rgba(214,202,225,.15);
    border-radius:8px;
    background:rgba(255,255,255,.025);
    color:#aaa3b2;
}

.staff-command-page .staff-header-utility:hover,
.staff-command-page .staff-header-utility:focus-visible{
    border-color:rgba(197,168,255,.34);
    background:rgba(156,108,255,.08);
    color:#eee7f6;
}

.staff-command-page .staff-header-utility.logout{
    border-color:rgba(255,143,155,.18);
    background:rgba(122,22,39,.09);
}

.staff-command-page .staff-header-divider{
    background:linear-gradient(90deg, transparent, rgba(201,169,107,.15) 8%, rgba(197,168,255,.13) 92%, transparent);
}

.staff-command-page .staff-command-nav{
    gap:6px;
    scrollbar-color:rgba(201,169,107,.27) transparent;
}

.staff-command-page .staff-nav-link{
    min-height:37px;
    padding:8px 11px;
    border-color:rgba(214,202,225,.09);
    border-radius:8px;
    background:rgba(255,255,255,.018);
    color:#9992a1;
    font-size:11px;
    letter-spacing:.015em;
}

.staff-command-page .staff-nav-link:hover,
.staff-command-page .staff-nav-link:focus-visible{
    border-color:rgba(197,168,255,.27);
    background:rgba(156,108,255,.065);
    color:#e7ddf1;
    box-shadow:none;
}

.staff-command-page .staff-nav-link.is-active,
.staff-command-page .staff-nav-link.is-active:hover,
.staff-command-page .staff-nav-link.is-active:focus-visible{
    border-color:rgba(201,169,107,.35);
    background:linear-gradient(180deg, rgba(201,169,107,.12), rgba(201,169,107,.055));
    box-shadow:inset 0 -2px 0 rgba(201,169,107,.45), 0 8px 20px rgba(0,0,0,.14);
    color:#f0dca9;
}

.staff-command-page .staff-unread-badge,
.staff-command-page .ticket-unread-badge{
    border-color:rgba(255,220,224,.6);
    background:#a9364b;
    color:#fff;
    animation:hb-unread-arrival 1.5s ease-out 1;
}

@keyframes hb-unread-arrival{
    0%{ box-shadow:0 0 0 0 rgba(255,143,155,.42); }
    65%{ box-shadow:0 0 0 8px rgba(255,143,155,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,143,155,0); }
}

.staff-command-status{
    display:flex;
    flex-wrap:wrap;
    gap:6px 18px;
    padding:9px 2px 0;
    color:#68636e;
    font-size:9px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.staff-command-status span{
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.staff-command-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#79d6ad;
    box-shadow:0 0 9px rgba(121,214,173,.35);
}

/* Shared command surfaces, forms and operational tables. */

.staff-command-page main > :first-child:not(.staff-ticket-back){
    margin-top:0;
}

.staff-command-page :is(
    .staff-page-heading,
    .customers-heading,
    .staff-ticket-heading,
    .staff-request-heading,
    .staff-products-heading,
    .inventory-heading,
    .digital-heading,
    .audit-heading,
    .product-detail-heading,
    .request-detail-heading,
    .customer-account-header,
    .digital-group-heading
){
    position:relative;
    margin:0 0 23px;
    padding:0 0 18px 17px;
    border-bottom:1px solid rgba(201,169,107,.12);
}

.staff-command-page :is(
    .staff-page-heading,
    .customers-heading,
    .staff-ticket-heading,
    .staff-request-heading,
    .staff-products-heading,
    .inventory-heading,
    .digital-heading,
    .audit-heading
)::before{
    content:"";
    position:absolute;
    top:3px;
    bottom:20px;
    left:0;
    width:2px;
    background:linear-gradient(var(--hb-gold), var(--hb-violet));
}

.staff-command-page :is(
    .staff-page-heading,
    .customers-heading,
    .staff-ticket-heading,
    .staff-request-heading,
    .staff-products-heading,
    .inventory-heading,
    .digital-heading,
    .audit-heading
) h1{
    margin:0 0 6px;
    font-size:clamp(32px, 3.4vw, 47px);
}

.staff-command-page :is(
    .staff-page-heading,
    .customers-heading,
    .staff-ticket-heading,
    .staff-request-heading,
    .staff-products-heading,
    .inventory-heading,
    .digital-heading,
    .audit-heading
) p{
    margin:0;
    color:#8d8694;
}

.staff-command-page input,
.staff-command-page textarea,
.staff-command-page select{
    border:1px solid rgba(214,202,225,.18);
    border-radius:8px;
    outline:none;
    background:#0a090d;
    color:#eee9f2;
    color-scheme:dark;
    font-family:var(--hb-ui);
}

.staff-command-page input::placeholder,
.staff-command-page textarea::placeholder{
    color:#625d68;
}

.staff-command-page input:hover,
.staff-command-page textarea:hover,
.staff-command-page select:hover{
    border-color:rgba(214,202,225,.3);
}

.staff-command-page input:focus-visible,
.staff-command-page textarea:focus-visible,
.staff-command-page select:focus-visible{
    border-color:rgba(197,168,255,.65);
    box-shadow:0 0 0 3px rgba(156,108,255,.13), 0 0 22px rgba(156,108,255,.07);
}

.staff-command-page input[type="checkbox"],
.staff-command-page input[type="radio"]{
    width:auto;
    accent-color:#9c6cff;
}

.staff-command-page button,
.staff-command-page a.button{
    display:inline-flex;
    min-height:39px;
    align-items:center;
    justify-content:center;
    padding:9px 14px;
    border:1px solid rgba(197,168,255,.3);
    border-radius:8px;
    background:linear-gradient(135deg, #6638b5, #8251d3 58%, #5932a0);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13), 0 8px 20px rgba(56,25,106,.18);
    color:#fff;
    font:750 12px/1.2 var(--hb-ui);
    text-align:center;
    text-decoration:none;
    transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.staff-command-page button:hover,
.staff-command-page button:focus-visible,
.staff-command-page a.button:hover,
.staff-command-page a.button:focus-visible{
    border-color:rgba(224,208,255,.6);
    background:linear-gradient(135deg, #7444c3, #9362df 58%, #663bb0);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 11px 25px rgba(56,25,106,.28);
    color:#fff;
    transform:translateY(-1px);
}

.staff-command-page button:focus-visible,
.staff-command-page a:focus-visible{
    outline:3px solid rgba(197,168,255,.27);
    outline-offset:3px;
}

.staff-command-page :is(.danger-button, button.danger-button, a.danger-button){
    border-color:rgba(255,143,155,.38);
    background:rgba(145,38,54,.28);
    box-shadow:none;
    color:#ffc3ca;
}

.staff-command-page :is(.danger-button, button.danger-button, a.danger-button):hover,
.staff-command-page :is(.danger-button, button.danger-button, a.danger-button):focus-visible{
    border-color:rgba(255,143,155,.68);
    background:rgba(164,39,58,.45);
    color:#fff;
}

.staff-command-page :is(
    .ticket-filter-card,
    .customer-filter-card,
    .request-filter-card,
    .product-filter-card,
    .inventory-filter-card,
    .digital-filter-card,
    .audit-filter-card
){
    margin-bottom:22px;
    padding:20px;
    border-color:rgba(201,169,107,.12);
    background:rgba(255,255,255,.015);
}

.staff-command-page :is(
    .staff-summary-card,
    .customer-summary-card,
    .digital-summary-card,
    .audit-summary-card,
    .inventory-stat,
    .digital-count-box
){
    border:1px solid rgba(214,202,225,.1);
    border-radius:12px;
    background:rgba(255,255,255,.018);
    box-shadow:none;
    color:#c9c2d1;
}

.staff-command-page :is(
    .table-wrapper,
    .ticket-table-wrap,
    .customer-table-wrap,
    .request-table-wrap,
    .product-table-wrap,
    .inventory-table-wrap,
    .digital-table-wrap,
    .audit-table-wrap,
    .staff-table-wrap
){
    max-width:100%;
    overflow-x:auto;
    border:1px solid rgba(214,202,225,.11);
    border-radius:12px;
    background:rgba(5,5,8,.38);
    box-shadow:0 16px 38px rgba(0,0,0,.17);
}

.staff-command-page table,
.staff-command-page .admin-table{
    background:transparent;
    color:#c5bfcc;
}

.staff-command-page table th,
.staff-command-page .admin-table th{
    border-bottom:1px solid rgba(201,169,107,.18);
    background:#111016;
    color:#98919f;
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.staff-command-page table td,
.staff-command-page .admin-table td{
    border-bottom:1px solid rgba(214,202,225,.075);
    background:transparent;
}

.staff-command-page table tbody tr{
    transition:background .15s ease;
}

.staff-command-page table tbody tr:hover{
    background:rgba(156,108,255,.04);
}

.staff-command-page :is(
    .status-badge,
    .status-pill,
    .stock-pill,
    .ticket-meta-pill,
    .request-status-pill,
    .digital-status-pill,
    .staff-status,
    .staff-role,
    .customer-status
){
    border:1px solid rgba(197,168,255,.2);
    background:rgba(156,108,255,.07);
    color:#d7cae8;
}

.staff-command-page :is(.status-badge.active, .status-active, .stock-good){
    border-color:rgba(121,214,173,.25);
    background:rgba(38,123,87,.13);
    color:#a9e7ca;
}

.staff-command-page :is(.status-badge.inactive, .status-inactive, .stock-out){
    border-color:rgba(255,143,155,.27);
    background:rgba(139,39,53,.16);
    color:#ffc0c7;
}

/* =========================================================
   HubBits & MorDocs: shared semantic state language
   Clarity first. Magic second. Identity always.
   ========================================================= */

.hb-state-pill{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
    white-space:nowrap;
}

.hb-state-pill::before{
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 8px currentColor;
    opacity:.9;
}

.hb-state-pill--success{
    border-color:rgba(121,214,173,.3) !important;
    background:rgba(38,123,87,.14) !important;
    color:#a9e7ca !important;
}

.hb-state-pill--attention{
    border-color:rgba(232,207,151,.32) !important;
    background:rgba(201,169,107,.10) !important;
    color:var(--hb-gold-bright) !important;
}

.hb-state-pill--danger{
    border-color:rgba(255,143,155,.3) !important;
    background:rgba(139,39,53,.16) !important;
    color:#ffc0c7 !important;
}

.hb-state-pill--info{
    border-color:rgba(197,168,255,.28) !important;
    background:rgba(156,108,255,.09) !important;
    color:#d9c8ff !important;
}

.hb-state-pill--muted{
    border-color:rgba(203,196,214,.18) !important;
    background:rgba(157,149,170,.07) !important;
    color:#aaa3b3 !important;
}

.staff-command-page :is(
    .digital-security-note,
    .staff-security-note,
    .staff-owner-note,
    .staff-lock-note,
    .audit-note,
    .real-confirm
){
    border-color:rgba(201,169,107,.2);
    background:rgba(201,169,107,.04);
    color:#cdbf9f;
}

.staff-command-page .staff-owner-note{
    box-shadow:inset 3px 0 0 rgba(201,169,107,.58);
}

.staff-command-page :is(
    .staff-ticket-message,
    .contact-history-entry,
    .request-message-box,
    .staff-edit-section,
    .assignment-item,
    .digital-history,
    .replacement-summary
){
    border-color:rgba(214,202,225,.11);
    background:rgba(255,255,255,.016);
}

.staff-command-page :is(.staff-ticket-description, .staff-ticket-attachments, .staff-ticket-conversation){
    border-color:rgba(201,169,107,.13);
}

.staff-command-page .staff-ticket-attachment img,
.staff-command-page .staff-reply-image-card img,
.staff-command-page :is(.product-thumb, .inventory-thumb, .digital-group-image, .product-detail-image){
    border:1px solid rgba(214,202,225,.12);
    background:#08070b;
}

.staff-command-page :is(
    .product-thumb-placeholder,
    .inventory-thumb-placeholder,
    .digital-group-placeholder,
    .assignment-placeholder,
    .replacement-placeholder,
    .dummy-product-placeholder,
    .real-product-placeholder
){
    border-color:rgba(214,202,225,.15);
    background:rgba(255,255,255,.02);
    color:#716b76;
}

.staff-command-page .site-footer--staff{
    margin-top:auto;
    border-top:1px solid rgba(201,169,107,.1);
    background:#07070a;
    color:#625d67;
}

/* Staff dashboard: command deck, not a recolored public portal. */

.staff-command-page .staff-dashboard{
    max-width:1540px;
    padding-bottom:62px;
}

.staff-command-page .staff-command-hero{
    position:relative;
    overflow:hidden;
    margin:0 0 18px;
    padding:32px 34px;
    border:1px solid rgba(201,169,107,.16);
    border-radius:16px;
    background:
        linear-gradient(90deg, rgba(201,169,107,.035) 1px, transparent 1px),
        linear-gradient(rgba(197,168,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 90% 15%, rgba(126,66,218,.17), transparent 30%),
        #0f0e14;
    background-size:64px 64px, 64px 64px, auto, auto;
    box-shadow:0 20px 52px rgba(0,0,0,.26);
}

.staff-command-page .staff-command-hero::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:linear-gradient(var(--hb-gold), var(--hb-violet));
}

.staff-command-page .staff-command-hero::after{
    right:-70px;
    bottom:-110px;
    width:280px;
    height:280px;
    border:1px solid rgba(201,169,107,.08);
    box-shadow:0 0 0 34px rgba(197,168,255,.018), 0 0 0 68px rgba(201,169,107,.012);
}

.staff-command-page .staff-command-kicker{
    color:var(--hb-gold-bright);
    font-size:10px;
}

.staff-command-page .staff-command-hero h1{
    color:#f5f1fb;
    font-family:var(--hb-display);
    font-size:clamp(34px, 3.6vw, 52px);
    font-weight:700;
}

.staff-command-page .staff-command-hero > p:not(.staff-command-kicker){
    color:#928b99;
}

.staff-command-page .staff-command-chip{
    border-color:rgba(214,202,225,.14);
    background:rgba(6,6,9,.44);
    color:#aaa3b1;
}

.staff-command-page .staff-overview-grid{
    gap:12px;
    margin-bottom:26px;
}

.staff-command-page .staff-overview-card{
    position:relative;
    overflow:hidden;
    padding:18px 20px;
    border-color:rgba(214,202,225,.1);
    border-radius:12px;
    background:#0e0d12;
    box-shadow:none;
}

.staff-command-page .staff-overview-card::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(156,108,255,.35), transparent);
}

.staff-command-page .staff-overview-label,
.staff-command-page .staff-overview-detail{
    color:#77717d;
}

.staff-command-page .staff-overview-value{
    color:#e9e3ee;
    font-family:var(--hb-display);
    font-weight:700;
}

.staff-command-page .staff-command-section-heading h2{
    color:#eee9f2;
    font-family:var(--hb-display);
    font-size:30px;
}

.staff-command-page .staff-command-section-heading p{
    color:#77717d;
}

.staff-command-page .staff-launch-grid{
    gap:13px;
}

.staff-command-page .staff-launch-card{
    min-height:200px;
    padding:20px;
    border-color:rgba(214,202,225,.1);
    border-radius:13px;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 58%),
        #0e0d12;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 13px 32px rgba(0,0,0,.16);
    color:#c8c2cf;
}

.staff-command-page .staff-launch-card::before{
    width:3px;
    height:100%;
    opacity:.78;
}

.staff-command-page .staff-launch-card::after{
    border-width:1px;
    border-color:color-mix(in srgb, var(--card-accent) 20%, transparent);
}

.staff-command-page .staff-launch-card:hover{
    border-color:color-mix(in srgb, var(--card-accent) 34%, rgba(214,202,225,.12));
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--card-accent) 11%, transparent), transparent 62%),
        #121017;
    box-shadow:0 17px 38px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--card-accent) 13%, transparent);
    color:#eee9f2;
    transform:translateY(-2px);
}

.staff-command-page .staff-launch-icon{
    border-color:color-mix(in srgb, var(--card-accent) 25%, rgba(214,202,225,.08));
    border-radius:11px;
    background:color-mix(in srgb, var(--card-accent) 8%, #0b0a0e);
    box-shadow:none;
    filter:saturate(.72);
}

.staff-command-page .staff-launch-count{
    color:color-mix(in srgb, var(--card-accent) 72%, #d8cfe3);
}

.staff-command-page .staff-launch-card h3{
    color:#e9e4ed;
    font-family:var(--hb-display);
}

.staff-command-page .staff-launch-card p{
    color:#817a87;
}

.staff-command-page .staff-launch-footer{
    color:color-mix(in srgb, var(--card-accent) 65%, #c9c1d1);
}

.staff-command-page .staff-launch-arrow{
    background:color-mix(in srgb, var(--card-accent) 70%, #1a1720);
}

.staff-command-page .staff-launch-card.customers{ --card-accent:#7155a6; }
.staff-command-page .staff-launch-card.tickets{ --card-accent:#8d64cf; }
.staff-command-page .staff-launch-card.replies{ --card-accent:#a95668; }
.staff-command-page .staff-launch-card.requests{ --card-accent:#a8874f; }
.staff-command-page .staff-launch-card.products{ --card-accent:#527f79; }
.staff-command-page .staff-launch-card.inventory{ --card-accent:#4b846d; }
.staff-command-page .staff-launch-card.digital{ --card-accent:#6751a7; }
.staff-command-page .staff-launch-card.staff{ --card-accent:#77717e; }
.staff-command-page .staff-launch-card.audit{ --card-accent:#8b65ad; }

.staff-command-page .permission-reference{
    border-color:rgba(201,169,107,.12);
    background:#0d0c11;
    box-shadow:none;
}

.staff-command-page .permission-reference li{
    color:#8d8693;
}

/* Password gate uses the command language without changing its flow. */

.staff-password-page > header:not(.staff-site-header){
    padding:0;
    border-bottom:1px solid rgba(201,169,107,.14);
    background:#0c0b10;
    box-shadow:0 15px 42px rgba(0,0,0,.28);
}

.staff-password-page > header .container{
    width:min(calc(100% - 42px), 1180px);
    max-width:1180px;
    min-height:76px;
    padding:12px 0;
}

.staff-password-page .logo{
    color:#f2eef6;
    font-family:var(--hb-display);
    font-size:22px;
}

.staff-command-page .staff-password-wrapper,
.staff-command-page .staff-create-wrapper{
    margin:10px auto 42px;
}

.staff-command-page .staff-password-wrapper > .card,
.staff-command-page .staff-create-wrapper > .card{
    position:relative;
    overflow:hidden;
    padding:34px;
    border-color:rgba(201,169,107,.16);
}

.staff-command-page .staff-password-wrapper > .card::before,
.staff-command-page .staff-create-wrapper > .card::before{
    content:"";
    position:absolute;
    inset:0 15% auto;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,207,151,.55), transparent);
}

/* Responsive realm behavior -------------------------------------- */

@media(max-width:1120px){
    .customer-realm-page .customer-action-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .customer-realm-page .customer-realm-hero{
        grid-template-columns:auto minmax(0, 1fr);
    }

    .customer-realm-hero__seal{
        grid-column:1 / -1;
        width:max-content;
        margin-left:92px;
    }
}

@media(max-width:800px){
    .site-nav__realm{
        width:100%;
        justify-content:center;
        margin-bottom:4px;
    }

    .customer-realm-page > main,
    .staff-command-page > main.container{
        width:calc(100% - 30px);
    }

    .customer-realm-page .customer-realm-hero{
        grid-template-columns:1fr;
        padding:30px 26px;
    }

    .customer-realm-hero__crest{
        margin:8px 0 3px 9px;
    }

    .customer-realm-hero__seal{
        grid-column:auto;
        width:100%;
        margin-left:0;
    }

    .customer-vault-notices{
        grid-template-columns:1fr;
    }

    .staff-command-page .staff-header-inner{
        width:calc(100% - 28px);
    }

    .staff-command-status{
        display:none;
    }
}

@media(max-width:620px){
    .customer-realm-page .customer-action-grid,
    .customer-realm-page .customer-dashboard-grid,
    .customer-realm-page .customer-account-grid,
    .customer-realm-page .customer-future-grid{
        grid-template-columns:1fr;
    }

    .customer-realm-page .customer-section,
    .customer-realm-page .digital-product-card,
    .customer-realm-page .reveal-wrapper > .card,
    .customer-request-page .request-form-card{
        padding:24px 20px;
    }

    .customer-realm-page .customer-vault-heading{
        grid-template-columns:1fr;
    }

    .customer-realm-page .digital-product-heading{
        grid-template-columns:1fr;
    }

    .customer-realm-page .digital-product-image{
        max-width:100%;
    }

    .customer-realm-page .customer-history-table{
        min-width:680px;
    }

    .staff-command-page .staff-header-account{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .staff-command-page .staff-role-chip{
        grid-column:1 / -1;
        width:100%;
        justify-content:center;
    }

    .staff-command-page .staff-command-hero{
        padding:27px 23px;
    }

    .staff-command-page .staff-password-wrapper > .card,
    .staff-command-page .staff-create-wrapper > .card{
        padding:26px 21px;
    }
}

@media(prefers-reduced-motion:reduce){
    .customer-realm-page *,
    .staff-command-page *{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .customer-realm-page button:hover,
    .customer-realm-page a.button:hover,
    .staff-command-page button:hover,
    .staff-command-page a.button:hover,
    .staff-command-page .staff-launch-card:hover{
        transform:none !important;
    }

    .staff-command-page .staff-unread-badge,
    .staff-command-page .ticket-unread-badge{
        animation:none !important;
    }
}

/* =========================================================
   Phase 2: enchanted forms, support hall, and staff entry
   ========================================================= */

.enchanted-form-page,
.enchanted-form-page *,
.staff-command-login,
.staff-command-login *{
    box-sizing:border-box;
}

.enchanted-form-page{
    position:relative;
    isolation:isolate;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    margin:0;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 82% 8%, rgba(117,57,220,.19), transparent 29%),
        radial-gradient(circle at 9% 46%, rgba(201,169,107,.065), transparent 25%),
        linear-gradient(180deg, #0a0810 0%, #100c17 46%, #09080d 100%);
    color:var(--hb-silver);
    font-family:var(--hb-ui);
    font-size:16px;
    line-height:1.65;
}

.enchanted-form-page::before,
.enchanted-form-page::after{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
}

.enchanted-form-page::before{
    width:min(720px, 94vw);
    height:min(720px, 94vw);
    top:72px;
    left:50%;
    border:1px solid rgba(201,169,107,.045);
    border-radius:50%;
    box-shadow:
        0 0 0 96px rgba(197,168,255,.012),
        0 0 0 192px rgba(201,169,107,.009);
    opacity:.8;
    transform:translateX(-50%);
}

.enchanted-form-page::after{
    inset:84px 0 auto;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,169,107,.19), transparent);
}

.enchanted-form-page > .site-header,
.enchanted-form-page > main,
.enchanted-form-page > .site-footer{
    position:relative;
    z-index:1;
}

.enchanted-form-page > main{
    flex:1 0 auto;
}

.enchanted-form-page > .site-footer{
    margin-top:0;
}

.enchanted-form-page .container{
    width:min(92%, var(--hb-container));
    max-width:var(--hb-container);
}

.enchanted-form-page h1,
.enchanted-form-page h2,
.enchanted-form-page h3{
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    line-height:1.15;
    text-wrap:balance;
}

.enchanted-form-page a{
    color:var(--hb-violet-bright);
    text-underline-offset:3px;
}

.enchanted-form-page a:hover{
    color:#e0d1ff;
}

.auth-shell{
    min-height:clamp(590px, calc(100vh - 190px), 840px);
    display:grid;
    place-items:center;
    padding-top:72px !important;
    padding-bottom:84px !important;
}

.enchanted-panel{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(213,192,255,.18);
    border-radius:var(--hb-radius-lg);
    background:
        linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        rgba(15,12,21,.94);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 26px 80px rgba(0,0,0,.42),
        0 0 55px rgba(109,51,211,.07);
    color:var(--hb-silver);
}

.enchanted-panel::before{
    content:"";
    position:absolute;
    top:0;
    right:12%;
    left:12%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,207,151,.62), transparent);
}

.auth-panel{
    width:min(100%, 610px);
    max-width:610px;
    margin:0;
    padding:48px 50px 42px;
    text-align:left;
}

.auth-panel--wide{
    width:min(100%, 760px);
    max-width:760px;
}

.form-sigil{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin:0 0 22px;
    border:1px solid rgba(201,169,107,.45);
    border-radius:13px;
    background:
        radial-gradient(circle, rgba(156,108,255,.22), transparent 68%),
        #100d17;
    box-shadow:0 0 24px rgba(156,108,255,.13);
    color:var(--hb-gold-bright);
    font-size:14px;
    transform:rotate(45deg);
}

.form-sigil::first-letter{
    transform:rotate(-45deg);
}

.form-eyebrow,
.command-eyebrow{
    margin:0 0 10px;
    color:var(--hb-gold-bright);
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.auth-panel h1,
.ticket-lookup-card h1,
.support-heading h1{
    margin:0;
    font-size:clamp(34px, 5vw, 48px);
    letter-spacing:-.025em;
}

.form-intro{
    max-width:610px;
    margin:14px 0 30px;
    color:#aaa2b5;
    line-height:1.7;
}

.auth-panel .form-intro{
    max-width:470px;
}

.enchanted-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-field{
    min-width:0;
}

.form-field--wide{
    grid-column:1 / -1;
}

.enchanted-form-page .form-field label,
.staff-command-login .form-field label{
    display:block;
    margin:0 0 8px;
    color:#e1dbe8;
    font-size:13px;
    font-weight:750;
    letter-spacing:.015em;
}

.form-label-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
}

.form-label-row a{
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.label-optional{
    margin-left:7px;
    color:#888092;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.enchanted-form-page .enchanted-form input,
.enchanted-form-page .enchanted-form textarea,
.enchanted-form-page .enchanted-form select,
.staff-command-login .command-auth-form input{
    width:100%;
    min-height:50px;
    margin:0;
    padding:13px 14px;
    border:1px solid rgba(211,196,226,.2);
    border-radius:11px;
    outline:none;
    background:rgba(5,4,8,.56);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.02),
        0 0 0 0 rgba(156,108,255,0);
    color:#f4eff9;
    caret-color:var(--hb-violet-bright);
    font:inherit;
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.enchanted-form-page .enchanted-form textarea{
    min-height:160px;
    resize:vertical;
}

.enchanted-form-page .enchanted-form select{
    color-scheme:dark;
}

.enchanted-form-page .enchanted-form input::placeholder,
.enchanted-form-page .enchanted-form textarea::placeholder,
.staff-command-login .command-auth-form input::placeholder{
    color:#716a7c;
    opacity:1;
}

.enchanted-form-page .enchanted-form input:hover,
.enchanted-form-page .enchanted-form textarea:hover,
.enchanted-form-page .enchanted-form select:hover,
.staff-command-login .command-auth-form input:hover{
    border-color:rgba(211,196,226,.34);
    background:rgba(10,8,14,.72);
}

.enchanted-form-page .enchanted-form input:focus-visible,
.enchanted-form-page .enchanted-form textarea:focus-visible,
.enchanted-form-page .enchanted-form select:focus-visible,
.staff-command-login .command-auth-form input:focus-visible{
    border-color:rgba(197,168,255,.78);
    background:rgba(12,9,17,.88);
    box-shadow:
        0 0 0 3px rgba(156,108,255,.16),
        0 0 28px rgba(114,56,218,.11);
}

.enchanted-form-page input[type="file"]{
    min-height:62px;
    padding:8px;
    border-style:dashed;
    cursor:pointer;
}

.enchanted-form-page input[type="file"]::file-selector-button{
    min-height:42px;
    margin-right:12px;
    padding:9px 14px;
    border:1px solid rgba(201,169,107,.38);
    border-radius:8px;
    background:rgba(201,169,107,.09);
    color:var(--hb-gold-bright);
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:750;
}

.enchanted-form-page .form-help,
.enchanted-form-page .reply-image-help{
    display:block;
    margin:8px 0 0;
    color:#888092;
    font-size:12px;
    line-height:1.55;
}

.form-submit,
.command-submit{
    position:relative;
    isolation:isolate;
    min-height:52px;
    width:100%;
    overflow:hidden;
    margin:2px 0 0;
    padding:13px 22px;
    border:1px solid rgba(213,187,255,.52);
    border-radius:11px;
    background:
        linear-gradient(135deg, #7440d2, #9b68ef 56%, #6840bb);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 12px 30px rgba(83,35,168,.25);
    color:#fff;
    cursor:pointer;
    font-family:var(--hb-ui);
    font-size:14px;
    font-weight:800;
    letter-spacing:.025em;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.form-submit::before,
.command-submit::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-35%;
    bottom:-35%;
    left:-60%;
    width:38%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    opacity:0;
    transform:skewX(-18deg);
}

.form-submit:hover,
.form-submit:focus-visible,
.command-submit:hover,
.command-submit:focus-visible{
    border-color:rgba(236,221,255,.82);
    background:
        linear-gradient(135deg, #8050da, #aa77f4 56%, #7348c8);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 16px 38px rgba(83,35,168,.34),
        0 0 28px rgba(156,108,255,.18);
    transform:translateY(-1px);
}

.form-submit:hover::before,
.form-submit:focus-visible::before,
.command-submit:hover::before,
.command-submit:focus-visible::before{
    animation:form-button-shimmer .78s ease-out both;
}

.form-submit:focus-visible,
.command-submit:focus-visible{
    outline:3px solid rgba(197,168,255,.3);
    outline-offset:3px;
}

@keyframes form-button-shimmer{
    0%{ left:-60%; opacity:0; }
    22%{ opacity:.9; }
    100%{ left:125%; opacity:0; }
}

.auth-alternate{
    margin:26px 0 0;
    padding-top:22px;
    border-top:1px solid rgba(218,202,232,.1);
    color:#928a9d;
    font-size:13px;
    text-align:center;
}

.auth-alternate a{
    font-weight:750;
    text-decoration:none;
}

.enchanted-form-page .message,
.staff-command-login .message{
    margin:0 0 24px;
    padding:14px 16px;
    border-radius:11px;
    font-size:13px;
    font-weight:650;
    line-height:1.55;
}

.enchanted-form-page .message.error,
.staff-command-login .message.error{
    border:1px solid rgba(255,143,155,.34);
    background:rgba(139,39,53,.17);
    color:#ffc0c7;
}

.enchanted-form-page .message.success,
.staff-command-login .message.success{
    border:1px solid rgba(121,214,173,.3);
    background:rgba(31,119,83,.16);
    color:#a9e7ca;
}

.development-reset-note p{
    margin:10px 0 0;
}

.break-anywhere{
    overflow-wrap:anywhere;
}

.support-shell{
    padding-top:74px !important;
    padding-bottom:86px !important;
}

.support-ticket-form{
    width:min(100%, 940px);
    max-width:940px;
    margin:0 auto;
    padding:54px;
}

.support-heading{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    align-items:start;
    gap:24px;
    margin-bottom:36px;
}

.support-heading .form-sigil{
    margin-top:4px;
}

.support-heading .form-intro{
    margin-bottom:0;
}

.support-form{
    gap:24px;
}

.form-section{
    min-width:0;
    margin:0;
    padding:27px;
    border:1px solid rgba(218,202,232,.12);
    border-radius:16px;
    background:rgba(255,255,255,.018);
}

.form-section legend{
    padding:0 10px;
    color:#d8d0e1;
    font-family:var(--hb-display);
    font-size:17px;
    font-weight:700;
}

.form-section legend span{
    margin-right:9px;
    color:var(--hb-gold);
    font-family:var(--hb-ui);
    font-size:10px;
    letter-spacing:.12em;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
}

.form-grid--contact{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.form-grid--final{
    grid-template-columns:minmax(0, 1.7fr) minmax(190px, .65fr);
    align-items:start;
}

.ticket-confirmation{
    margin:0 0 28px;
    padding:20px;
    border:1px solid rgba(121,214,173,.28);
    border-radius:14px;
    background:rgba(34,119,85,.15);
    color:#b8e9d2;
}

.ticket-confirmation strong{
    color:var(--hb-gold-bright);
}

.support-shell--track{
    min-height:620px;
}

.ticket-lookup-card{
    width:min(100%, 720px);
    max-width:720px;
    margin:0 auto;
    padding:52px;
}

.ticket-lookup-card .form-sigil{
    margin-right:auto;
    margin-left:auto;
}

.ticket-lookup-card > .form-eyebrow,
.ticket-lookup-card > h1,
.ticket-lookup-card > .form-intro{
    text-align:center;
}

.ticket-lookup-card > .form-intro{
    margin-right:auto;
    margin-left:auto;
}

.lookup-guidance{
    margin:0 0 24px;
    padding:13px 15px;
    border-left:2px solid rgba(201,169,107,.5);
    background:rgba(201,169,107,.035);
    color:#9890a2;
    font-size:13px;
}

.lookup-form{
    gap:18px;
}

.ticket-page .portal-ticket-navigation{
    width:min(100%, 940px);
    margin:0 auto 24px;
}

.ticket-page .portal-ticket-navigation .button,
.ticket-page .ticket-lookup-card .button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:1px solid rgba(201,169,107,.3);
    border-radius:9px;
    background:rgba(201,169,107,.07);
    color:var(--hb-gold-bright);
    text-decoration:none;
}

.ticket-page .public-ticket-result{
    width:min(100%, 940px);
    max-width:940px;
    margin:0 auto;
    padding:46px;
}

.ticket-page .ticket-result-label{
    color:var(--hb-gold);
}

.ticket-page .public-ticket-grid{
    border:1px solid rgba(218,202,232,.1);
    background:rgba(255,255,255,.022);
}

.ticket-page .public-ticket-grid strong{
    color:#e3dce9;
}

.ticket-page .public-ticket-subject,
.ticket-page .public-ticket-conversation,
.ticket-page .customer-ticket-reply,
.ticket-page .public-ticket-note{
    border-color:rgba(218,202,232,.12);
}

.ticket-page .muted-text,
.ticket-page .public-ticket-note,
.ticket-page .ticket-message-heading span,
.ticket-page .ticket-message-author-type{
    color:#8d8596;
}

.ticket-page .ticket-message{
    border-color:rgba(197,168,255,.16);
    background:rgba(103,66,169,.09);
}

.ticket-page .ticket-message-customer{
    border-color:rgba(121,214,173,.2);
    background:rgba(46,130,95,.1);
}

.ticket-page .customer-ticket-reply form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.ticket-page .reply-image-card img{
    border-color:rgba(213,196,231,.18) !important;
}

.ticket-page .ticket-status-badge{
    border:1px solid rgba(255,255,255,.13);
    background:rgba(255,255,255,.07);
    color:#ddd6e5;
}

.ticket-page .status-open,
.ticket-page .status-reviewing,
.ticket-page .status-waiting-for-customer,
.ticket-page .status-in-progress{
    border-color:rgba(201,169,107,.25);
    background:rgba(201,169,107,.08);
    color:var(--hb-gold-bright);
}

.ticket-page .status-resolved{
    border-color:rgba(121,214,173,.27);
    background:rgba(52,142,104,.13);
    color:#a9e7ca;
}

/* The dedicated auth surface prevents legacy/home artwork from leaking in. */
.auth-page .home-hero,
.auth-page .home-hero__art{
    display:none !important;
}

/* Staff login: a disciplined command-deck variant of the same brand. */
.staff-command-login{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    margin:0;
    background:
        linear-gradient(rgba(7,7,10,.83), rgba(7,7,10,.93)),
        radial-gradient(circle at 50% 8%, rgba(103,58,177,.3), transparent 37%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 1px, transparent 1px 18px),
        #07070a;
    color:#c8c3d0;
    font-family:var(--hb-ui);
}

.command-header{
    padding:0;
    border-bottom:1px solid rgba(201,169,107,.16);
    background:rgba(7,7,10,.94);
    box-shadow:0 14px 45px rgba(0,0,0,.34);
    color:var(--hb-ivory);
}

.command-header__inner{
    width:min(94%, 1180px);
    max-width:1180px;
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin:0 auto;
    padding:13px 0;
}

.command-brand{
    display:flex;
    align-items:center;
    gap:13px;
    color:var(--hb-ivory);
    text-decoration:none;
}

.command-brand__sigil{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.4);
    border-radius:10px;
    background:linear-gradient(145deg, rgba(156,108,255,.15), rgba(255,255,255,.02));
    color:var(--hb-gold-bright);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.command-brand__copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.command-brand__copy strong{
    font-family:var(--hb-display);
    font-size:21px;
}

.command-brand__copy small{
    margin-top:7px;
    color:#8b8493;
    font-size:9px;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.command-nav{
    display:flex;
    gap:8px;
}

.command-nav a{
    padding:9px 11px;
    border:1px solid transparent;
    border-radius:8px;
    color:#aaa4b1;
    font-size:12px;
    font-weight:750;
    text-decoration:none;
}

.command-nav a:hover,
.command-nav a:focus-visible{
    border-color:rgba(201,169,107,.25);
    background:rgba(201,169,107,.055);
    color:var(--hb-gold-bright);
}

.command-brand:focus-visible,
.command-nav a:focus-visible{
    outline:3px solid rgba(197,168,255,.25);
    outline-offset:3px;
}

.command-auth-shell{
    width:min(92%, 1180px);
    max-width:1180px;
    min-height:640px;
    flex:1 0 auto;
    display:grid;
    place-items:center;
    margin:0 auto;
    padding:74px 0;
}

.command-auth-panel{
    position:relative;
    width:min(100%, 570px);
    max-width:570px;
    margin:0;
    overflow:hidden;
    padding:46px 48px 38px;
    border:1px solid rgba(201,169,107,.19);
    border-radius:18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
        rgba(13,12,17,.96);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 28px 78px rgba(0,0,0,.5);
    color:#c2bdca;
}

.command-auth-panel::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(201,169,107,.65), rgba(156,108,255,.55), transparent);
}

.command-auth-panel__crest{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin:0 0 24px;
    border:1px solid rgba(201,169,107,.38);
    border-radius:50%;
    background:rgba(156,108,255,.07);
    box-shadow:0 0 0 6px rgba(201,169,107,.025);
    color:var(--hb-gold-bright);
}

.command-auth-panel h1{
    max-width:440px;
    margin:0;
    color:var(--hb-ivory);
    font-family:var(--hb-display);
    font-size:clamp(32px, 5vw, 43px);
    line-height:1.08;
    letter-spacing:-.025em;
}

.command-intro{
    margin:15px 0 29px;
    color:#97909f;
}

.command-auth-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.command-security-note{
    margin:25px 0 0;
    padding-top:20px;
    border-top:1px solid rgba(215,202,225,.09);
    color:#77717e;
    font-size:11px;
    letter-spacing:.035em;
    text-align:center;
}

.command-security-note span{
    margin-right:7px;
    color:var(--hb-gold);
}

.staff-command-login .site-footer--staff{
    margin:0;
    border-top:1px solid rgba(201,169,107,.12);
    background:#08080b;
    color:#716b78;
}

.staff-command-login .site-footer__staff-inner{
    width:min(94%, 1180px);
    padding:18px 0;
}

.staff-command-login .site-footer__staff-inner p{
    font-family:var(--hb-ui);
    font-size:11px;
    letter-spacing:.04em;
}

/* Footer easter egg: explicit button state, discreet close, soft unfold. */
.voyage-note{
    display:flex;
    align-items:center;
    flex-direction:column;
}

.voyage-note__trigger{
    flex:0 0 34px;
    background:transparent;
}

.voyage-note__trigger[aria-expanded="true"] .voyage-note__mark{
    border-color:rgba(232,207,151,.78);
    color:#fff0c7;
    box-shadow:
        0 0 18px rgba(156,108,255,.32),
        0 0 6px rgba(232,207,151,.2),
        inset 0 0 10px rgba(156,108,255,.1);
    transform:rotate(135deg) scale(1.04);
    animation:none;
}

.voyage-note__message[hidden]{
    display:none;
}

.voyage-note__message[data-open]{
    position:relative;
    display:block;
    animation:voyage-note-reveal .48s cubic-bezier(.2,.72,.2,1) both;
}

.voyage-note__close{
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid transparent;
    border-radius:50%;
    background:transparent;
    color:#81798b;
    font-size:18px;
    line-height:1;
}

.voyage-note__close:hover,
.voyage-note__close:focus-visible{
    border-color:rgba(201,169,107,.28);
    background:rgba(201,169,107,.06);
    color:var(--hb-gold-bright);
}

.voyage-note__close:focus-visible{
    outline:3px solid rgba(197,168,255,.22);
    outline-offset:2px;
}

@media(max-width:760px){

    .auth-shell,
    .support-shell{
        width:calc(100% - 30px) !important;
        padding-top:50px !important;
        padding-bottom:58px !important;
    }

    .auth-panel,
    .support-ticket-form,
    .ticket-lookup-card,
    .ticket-page .public-ticket-result{
        padding:34px 25px;
        border-radius:18px;
    }

    .auth-panel h1,
    .ticket-lookup-card h1,
    .support-heading h1{
        font-size:36px;
    }

    .support-heading{
        grid-template-columns:1fr;
        gap:8px;
    }

    .support-heading .form-sigil{
        margin-bottom:18px;
    }

    .form-section{
        padding:22px 18px;
    }

    .form-grid,
    .form-grid--contact,
    .form-grid--final{
        grid-template-columns:1fr;
    }

    .form-field--wide{
        grid-column:auto;
    }

    .ticket-page .public-ticket-heading{
        flex-direction:column;
    }

    .command-header__inner{
        width:calc(100% - 30px);
        min-height:76px;
    }

    .command-brand__copy strong{
        font-size:18px;
    }

    .command-nav{
        gap:2px;
    }

    .command-nav a{
        padding:8px;
        font-size:11px;
    }

    .command-auth-shell{
        width:calc(100% - 30px);
        min-height:590px;
        padding:52px 0;
    }

    .command-auth-panel{
        padding:38px 26px 32px;
    }
}

@media(max-width:520px){

    .form-label-row{
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }

    .command-brand__copy small{
        display:none;
    }

    .command-brand__sigil{
        width:38px;
        height:38px;
    }

    .command-nav a:first-child{
        display:none;
    }

    .voyage-note__message{
        padding:28px 20px;
    }
}

@media(prefers-reduced-motion:reduce){

    .enchanted-form-page *,
    .staff-command-login *,
    .voyage-note__mark,
    .voyage-note__message{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .form-submit::before,
    .command-submit::before{
        display:none;
    }

    .form-submit:hover,
    .form-submit:focus-visible,
    .command-submit:hover,
    .command-submit:focus-visible{
        transform:none;
    }
}

/* ================================================================
   Phase 3 polish: living magical circuitry
   Reusable primary-action aurora and calm brand charge.
   ================================================================ */

@property --hb-aurora-angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

:root{
    --hb-aurora-violet:#a77bff;
    --hb-aurora-indigo:#7658e8;
    --hb-aurora-blue:#5797e8;
    --hb-aurora-magenta:#c060d5;
    --hb-aurora-rose:#da7eaa;
    --hb-aurora-gold:#d8bc78;
}

/*
 * Add .hb-arcane-action to a major action to opt into the complete effect.
 * Existing public/auth primary buttons are enrolled here for continuity.
 */
.form-submit,
.command-submit,
.storefront-page .button-primary,
.customer-realm-page .hb-arcane-action,
.staff-command-page .hb-arcane-action{
    --hb-awaken-delay:.42s;
    --hb-aurora-ring-width:2px;
    position:relative;
    isolation:isolate;
    overflow:visible;
    border-color:rgba(218,192,255,.48);
    background:
        radial-gradient(circle at 18% 0%, rgba(166,113,255,.18), transparent 43%),
        linear-gradient(135deg, #181120 0%, #24152f 54%, #17101e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(216,188,120,.12),
        0 10px 26px rgba(45,20,82,.22);
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    animation:hb-action-awaken 1.6s cubic-bezier(.2,.75,.2,1) var(--hb-awaken-delay) 1;
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .24s ease,
        box-shadow .24s ease,
        color .2s ease;
}

.customer-realm-page .customer-action-card .hb-arcane-action{
    border-color:rgba(216,188,120,.34);
    background:
        radial-gradient(circle at 16% 0%, rgba(166,113,255,.15), transparent 44%),
        linear-gradient(135deg, #17101f, #22142c 58%, #15101b);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 -1px 0 rgba(216,188,120,.1),
        0 9px 22px rgba(45,20,82,.18);
    color:#f7edcf;
}

.staff-command-page .hb-arcane-action{
    --hb-aurora-ring-width:1.5px;
    border-color:rgba(201,169,107,.38);
    background:
        radial-gradient(circle at 16% 0%, rgba(150,99,239,.15), transparent 42%),
        linear-gradient(135deg, #15101c, #201329 58%, #120f18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 -1px 0 rgba(201,169,107,.1),
        0 8px 20px rgba(34,16,62,.2);
}

.form-submit::before,
.command-submit::before,
.storefront-page .button-primary::before,
.customer-realm-page .hb-arcane-action::before,
.staff-command-page .hb-arcane-action::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    width:auto;
    height:auto;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(
        108deg,
        transparent 22%,
        transparent 39%,
        rgba(122,157,235,.08) 44%,
        rgba(199,166,255,.5) 49%,
        rgba(238,213,158,.28) 53%,
        transparent 59%,
        transparent 78%
    );
    background-position:135% 0;
    background-size:245% 100%;
    opacity:0;
    transform:none;
    animation:hb-welcome-current 1.25s cubic-bezier(.2,.72,.2,1) calc(var(--hb-awaken-delay) + .08s) 1 both;
}

.form-submit::after,
.command-submit::after,
.storefront-page .button-primary::after,
.customer-realm-page .hb-arcane-action::after,
.staff-command-page .hb-arcane-action::after{
    content:"";
    position:absolute;
    z-index:2;
    inset:-2px;
    box-sizing:border-box;
    padding:var(--hb-aurora-ring-width);
    border-radius:inherit;
    pointer-events:none;
    background:conic-gradient(
        from var(--hb-aurora-angle),
        rgba(167,123,255,.3),
        var(--hb-aurora-violet),
        var(--hb-aurora-indigo),
        var(--hb-aurora-blue),
        var(--hb-aurora-magenta),
        var(--hb-aurora-rose),
        rgba(216,188,120,.88),
        rgba(167,123,255,.3)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite:exclude;
    filter:drop-shadow(0 0 4px rgba(132,83,225,.32));
    opacity:.16;
    transition:opacity .25s ease, filter .25s ease;
}

.form-submit:hover,
.form-submit:focus-visible,
.command-submit:hover,
.command-submit:focus-visible,
.storefront-page .button-primary:hover,
.storefront-page .button-primary:focus-visible,
.customer-realm-page .hb-arcane-action:hover,
.customer-realm-page .hb-arcane-action:focus-visible,
.staff-command-page .hb-arcane-action:hover,
.staff-command-page .hb-arcane-action:focus-visible{
    border-color:rgba(236,218,255,.76);
    background:
        radial-gradient(circle at 18% 0%, rgba(180,126,255,.25), transparent 44%),
        linear-gradient(135deg, #1b1225, #2a1737 54%, #191020);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        inset 0 -1px 0 rgba(225,199,135,.16),
        0 13px 30px rgba(55,23,101,.29),
        0 0 20px rgba(136,83,224,.1);
    color:#fff;
}

.customer-realm-page .customer-action-card .hb-arcane-action:hover,
.customer-realm-page .customer-action-card .hb-arcane-action:focus-visible{
    background:
        radial-gradient(circle at 18% 0%, rgba(180,126,255,.25), transparent 44%),
        linear-gradient(135deg, #1b1225, #2a1737 54%, #191020);
    color:#fff;
}

.form-submit:hover::before,
.command-submit:hover::before,
.storefront-page .button-primary:hover::before,
.customer-realm-page .hb-arcane-action:hover::before,
.staff-command-page .hb-arcane-action:hover::before{
    animation:hb-hover-current .9s cubic-bezier(.2,.72,.2,1) 1 both;
}

.form-submit:hover::after,
.command-submit:hover::after,
.storefront-page .button-primary:hover::after,
.customer-realm-page .hb-arcane-action:hover::after,
.staff-command-page .hb-arcane-action:hover::after{
    opacity:.92;
    filter:
        drop-shadow(0 0 4px rgba(126,82,218,.46))
        drop-shadow(0 0 7px rgba(216,188,120,.12));
    animation:hb-aurora-flow 3.1s linear infinite;
}

.form-submit:focus-visible::after,
.command-submit:focus-visible::after,
.storefront-page .button-primary:focus-visible::after,
.customer-realm-page .hb-arcane-action:focus-visible::after,
.staff-command-page .hb-arcane-action:focus-visible::after{
    opacity:.82;
    filter:drop-shadow(0 0 5px rgba(150,104,234,.46));
}

.customer-realm-page .customer-action-card:nth-child(2) .hb-arcane-action{
    --hb-awaken-delay:.54s;
}

.customer-realm-page .customer-action-card:nth-child(3) .hb-arcane-action{
    --hb-awaken-delay:.66s;
}

.customer-realm-page .customer-action-card:nth-child(4) .hb-arcane-action{
    --hb-awaken-delay:.78s;
}

:is(
    .form-submit,
    .command-submit,
    .storefront-page .button-primary,
    .customer-realm-page .hb-arcane-action,
    .staff-command-page .hb-arcane-action
):is(:disabled, .disabled-button){
    animation:none;
}

:is(
    .form-submit,
    .command-submit,
    .storefront-page .button-primary,
    .customer-realm-page .hb-arcane-action,
    .staff-command-page .hb-arcane-action
):is(:disabled, .disabled-button)::before,
:is(
    .form-submit,
    .command-submit,
    .storefront-page .button-primary,
    .customer-realm-page .hb-arcane-action,
    .staff-command-page .hb-arcane-action
):is(:disabled, .disabled-button)::after{
    display:none;
}

@keyframes hb-action-awaken{
    0%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.08),
            0 8px 20px rgba(38,17,69,.16);
    }
    42%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -1px 0 rgba(225,199,135,.16),
            0 12px 28px rgba(65,29,119,.27),
            0 0 18px rgba(156,108,255,.16),
            0 0 7px rgba(216,188,120,.08);
    }
    100%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            inset 0 -1px 0 rgba(216,188,120,.12),
            0 10px 26px rgba(45,20,82,.22);
    }
}

@keyframes hb-welcome-current{
    0%, 8%{ background-position:135% 0; opacity:0; }
    28%{ opacity:.68; }
    76%{ opacity:.48; }
    100%{ background-position:-135% 0; opacity:0; }
}

@keyframes hb-hover-current{
    0%{ background-position:135% 0; opacity:0; }
    24%{ opacity:.62; }
    100%{ background-position:-135% 0; opacity:0; }
}

@keyframes hb-aurora-flow{
    to{ --hb-aurora-angle:360deg; }
}

/* Brand marks breathe together on a long, quiet cycle. */
.site-brand__sigil,
.staff-command-page .staff-brand-mark,
.command-brand__sigil{
    animation:hb-brand-sigil-charge 9.6s ease-in-out 1.1s infinite;
    transition:border-color .3s ease, box-shadow .3s ease, filter .3s ease;
}

.site-brand__name,
.staff-command-page .staff-brand-name,
.command-brand__copy strong{
    animation:hb-brand-title-charge 9.6s ease-in-out 1.1s infinite;
    transition:color .3s ease, text-shadow .3s ease;
}

:is(.site-brand, .staff-brand, .command-brand):hover :is(
    .site-brand__sigil,
    .staff-brand-mark,
    .command-brand__sigil
),
:is(.site-brand, .staff-brand, .command-brand):focus-visible :is(
    .site-brand__sigil,
    .staff-brand-mark,
    .command-brand__sigil
){
    border-color:rgba(229,205,150,.62);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        0 0 9px rgba(222,196,139,.12),
        0 0 24px rgba(151,103,238,.28);
    filter:saturate(1.08);
    animation-play-state:paused;
}

:is(.site-brand, .staff-brand, .command-brand):hover :is(
    .site-brand__name,
    .staff-brand-name,
    .command-brand__copy strong
),
:is(.site-brand, .staff-brand, .command-brand):focus-visible :is(
    .site-brand__name,
    .staff-brand-name,
    .command-brand__copy strong
){
    color:#fffaf0;
    text-shadow:
        0 0 8px rgba(223,199,145,.16),
        0 0 19px rgba(167,123,255,.28);
    animation-play-state:paused;
}

@keyframes hb-brand-sigil-charge{
    0%, 68%, 100%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.1),
            0 0 18px rgba(126,76,213,.1);
    }
    78%{
        border-color:rgba(218,190,255,.58);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.14),
            0 0 8px rgba(218,190,255,.17),
            0 0 23px rgba(132,84,222,.24);
    }
    84%{
        border-color:rgba(228,203,146,.58);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.15),
            0 0 9px rgba(228,203,146,.14),
            0 0 27px rgba(158,108,241,.28);
    }
    92%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.11),
            0 0 20px rgba(130,82,218,.14);
    }
}

@keyframes hb-brand-title-charge{
    0%, 68%, 100%{
        color:inherit;
        text-shadow:0 1px 16px rgba(154,104,234,.08);
    }
    78%{
        color:#fcf9ff;
        text-shadow:
            0 0 8px rgba(218,190,255,.14),
            0 0 18px rgba(154,104,234,.22);
    }
    84%{
        color:#fffaf0;
        text-shadow:
            0 0 8px rgba(228,203,146,.12),
            0 0 21px rgba(164,116,245,.25);
    }
    92%{
        color:#f9f4ff;
        text-shadow:0 0 16px rgba(154,104,234,.14);
    }
}

@media(prefers-reduced-motion:reduce){
    .form-submit,
    .command-submit,
    .storefront-page .button-primary,
    .customer-realm-page .hb-arcane-action,
    .staff-command-page .hb-arcane-action,
    .site-brand__sigil,
    .site-brand__name,
    .staff-command-page .staff-brand-mark,
    .staff-command-page .staff-brand-name,
    .command-brand__sigil,
    .command-brand__copy strong{
        animation:none !important;
        transition-duration:.01ms !important;
    }

    .form-submit::before,
    .command-submit::before,
    .storefront-page .button-primary::before,
    .customer-realm-page .hb-arcane-action::before,
    .staff-command-page .hb-arcane-action::before{
        display:none !important;
    }

    .form-submit::after,
    .command-submit::after,
    .storefront-page .button-primary::after,
    .customer-realm-page .hb-arcane-action::after,
    .staff-command-page .hb-arcane-action::after{
        animation:none !important;
        opacity:.14;
    }

    .form-submit:hover::after,
    .form-submit:focus-visible::after,
    .command-submit:hover::after,
    .command-submit:focus-visible::after,
    .storefront-page .button-primary:hover::after,
    .storefront-page .button-primary:focus-visible::after,
    .customer-realm-page .hb-arcane-action:hover::after,
    .customer-realm-page .hb-arcane-action:focus-visible::after,
    .staff-command-page .hb-arcane-action:hover::after,
    .staff-command-page .hb-arcane-action:focus-visible::after{
        opacity:.55;
    }
}

/* ================================================================
   Final Phase 3 polish: clarity first, magic second, identity always
   ================================================================ */

/* Dense command surfaces stay compact without falling into fine print. */
.staff-command-page{
    font-size:15px;
    line-height:1.62;
}

.staff-command-page .staff-nav-link{
    min-height:40px;
    font-size:12px;
}

.staff-command-page .staff-brand-subtitle{
    font-size:10px;
    line-height:1.35;
}

.staff-command-page .staff-command-status{
    font-size:10px;
    line-height:1.45;
}

.staff-command-page main :is(label, legend){
    color:#d7d0dd;
    font-size:13px;
    line-height:1.4;
}

.staff-command-page main :is(.muted-text, .help-text, .field-help, small){
    color:#8f8897;
    font-size:12px;
    line-height:1.55;
}

.staff-command-page input:not([type="checkbox"]):not([type="radio"]),
.staff-command-page textarea,
.staff-command-page select{
    min-height:44px;
    background-color:#0a090d;
    color:#eee9f2;
    font-size:14px;
    line-height:1.45;
}

.staff-command-page textarea{
    min-height:116px;
}

.staff-command-page select option,
.customer-realm-page select option,
.enchanted-form-page select option{
    background:#0a090d;
    color:#eee9f2;
}

.staff-command-page main table th{
    color:#aaa3b1;
    font-size:11px;
    line-height:1.35;
}

.staff-command-page main table td{
    font-size:13.5px;
    line-height:1.55;
}

.staff-command-page main table :is(a, button, .button){
    font-size:12.5px;
}

.staff-command-page :is(
    .status-badge,
    .status-pill,
    .stock-pill,
    .ticket-meta-pill,
    .request-status-pill,
    .digital-status-pill,
    .staff-status,
    .staff-role,
    .customer-status
){
    font-size:11px;
    line-height:1.3;
}

.staff-command-page main .card > :first-child,
.customer-realm-page main .card > :first-child{
    margin-top:0;
}

.staff-command-page main .card > :last-child,
.customer-realm-page main .card > :last-child{
    margin-bottom:0;
}

.staff-command-page .message,
.customer-realm-page .message,
.enchanted-form-page .message{
    margin-block:18px;
    padding:15px 17px;
}

.staff-command-page .message.success,
.customer-realm-page .message.success,
.enchanted-form-page .message.success{
    animation:hb-notice-settle .58s cubic-bezier(.2,.72,.2,1) 1 both;
}

@keyframes hb-notice-settle{
    from{
        opacity:0;
        transform:translateY(-6px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Restrained lift belongs to navigational and summary cards only. */
.customer-realm-page :is(
    .customer-stat-card,
    .digital-product-card,
    .customer-future-card
),
.staff-command-page :is(
    .staff-overview-card,
    .staff-launch-card,
    .inventory-stat,
    .digital-summary-card,
    .staff-summary-card,
    .customer-summary-card
){
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

@media(hover:hover){
    .customer-realm-page :is(
        .customer-stat-card,
        .digital-product-card,
        .customer-future-card
    ):hover{
        border-color:rgba(211,188,250,.22);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            0 18px 42px rgba(28,12,51,.22),
            0 0 20px rgba(126,79,213,.06);
        transform:translateY(-2px);
    }

    .staff-command-page :is(
        .staff-overview-card,
        .inventory-stat,
        .digital-summary-card,
        .staff-summary-card,
        .customer-summary-card
    ):hover{
        border-color:rgba(201,169,107,.2);
        background:rgba(255,255,255,.025);
        box-shadow:0 15px 34px rgba(0,0,0,.18);
        transform:translateY(-2px);
    }
}

.empty-state__icon{
    animation:hb-empty-sigil-wake 1.25s ease-out .35s 1 both;
}

@keyframes hb-empty-sigil-wake{
    0%{ box-shadow:0 0 0 rgba(156,108,255,0); }
    48%{ box-shadow:0 0 24px rgba(156,108,255,.16); }
    100%{ box-shadow:0 0 10px rgba(156,108,255,.06); }
}

/* A danger control never inherits the inviting aurora, even if mis-tagged. */
.staff-command-page :is(.danger-button, button.danger-button, a.danger-button).hb-arcane-action{
    border-color:rgba(255,143,155,.38);
    background:rgba(145,38,54,.28);
    box-shadow:none;
    color:#ffc3ca;
    animation:none;
}

.staff-command-page :is(.danger-button, button.danger-button, a.danger-button).hb-arcane-action::before,
.staff-command-page :is(.danger-button, button.danger-button, a.danger-button).hb-arcane-action::after{
    display:none;
}

/* Branded 403 surface. The permission decision still happens in PHP. */
.restricted-passage-page .restricted-passage-header .staff-header-inner{
    margin:0 auto;
    padding-block:15px;
}

.restricted-passage-page .staff-header-top{
    min-height:54px;
    display:flex;
    align-items:center;
}

.restricted-passage-page .staff-brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#f5f1fb;
    text-decoration:none;
}

.restricted-passage-page .staff-brand:focus-visible{
    border-radius:10px;
    outline:3px solid rgba(197,168,255,.27);
    outline-offset:4px;
}

.restricted-passage-page .staff-brand-mark{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,169,107,.38);
}

.restricted-passage-page .staff-brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.restricted-passage-page .staff-brand-mark svg{
    width:23px;
    height:23px;
    fill:var(--hb-gold-bright);
    filter:drop-shadow(0 0 8px rgba(197,168,255,.3));
}

.restricted-passage-shell{
    min-height:clamp(560px, calc(100vh - 190px), 820px);
    display:grid;
    place-items:center;
}

.restricted-passage-card{
    position:relative;
    width:min(100%, 680px);
    overflow:hidden;
    padding:clamp(34px, 6vw, 58px);
    border:1px solid rgba(201,169,107,.2);
    border-radius:18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(129,79,219,.13), transparent 43%),
        linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.008)),
        #0d0c11;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 28px 74px rgba(0,0,0,.42);
    text-align:center;
}

.restricted-passage-card::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(201,169,107,.7), rgba(156,108,255,.58), transparent);
}

.restricted-passage-crest{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    margin:0 auto 24px;
    border:1px solid rgba(201,169,107,.34);
    border-radius:50%;
    background:rgba(156,108,255,.065);
    box-shadow:0 0 0 7px rgba(201,169,107,.025), 0 0 28px rgba(116,72,195,.1);
    color:var(--hb-gold-bright);
}

.restricted-passage-crest svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.restricted-passage-kicker{
    margin:0 0 10px;
    color:var(--hb-gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.restricted-passage-card h1{
    margin:0;
    font-size:clamp(38px, 7vw, 55px);
    letter-spacing:-.025em;
}

.restricted-passage-message{
    max-width:520px;
    margin:18px auto 30px;
    color:#aaa3b1;
    font-size:16px;
    line-height:1.75;
}

.restricted-passage-card .hb-arcane-action{
    min-height:46px;
    padding-inline:20px;
}

@media(max-width:520px){
    .restricted-passage-shell{
        min-height:520px;
    }

    .restricted-passage-page .staff-brand-name{
        font-size:21px;
    }

    .restricted-passage-card{
        border-radius:15px;
    }
}

@media(prefers-reduced-motion:reduce){
    .staff-command-page .message.success,
    .customer-realm-page .message.success,
    .enchanted-form-page .message.success,
    .empty-state__icon{
        animation:none !important;
    }

    .customer-realm-page :is(
        .customer-stat-card,
        .digital-product-card,
        .customer-future-card
    ):hover,
    .staff-command-page :is(
        .staff-overview-card,
        .staff-launch-card,
        .inventory-stat,
        .digital-summary-card,
        .staff-summary-card,
        .customer-summary-card
    ):hover{
        transform:none !important;
    }
}


/* =========================================================
   HUBBITS & MORDOCS — ARCANE BUTTON GLOW SYSTEM
   Soft awakening aura + cursor-following magical glow
   ========================================================= */

/* Buttons that should use the system */
.storefront-page .button-primary,
.storefront-page .button-secondary,
.customer-realm-page .hb-arcane-action,
.staff-command-page .hb-arcane-action,
.form-submit,
.command-submit {
    --hb-x: 50%;
    --hb-y: 50%;
    --hb-aura-opacity: 0;
    --hb-aura-scale: 0.92;
    --hb-load-delay: 0s;
    --hb-load-strength: 1;
    position: relative;
    isolation: isolate;
    overflow: visible;
    transition:
        transform 0.22s ease,
        box-shadow 0.24s ease,
        border-color 0.24s ease,
        background 0.24s ease,
        color 0.24s ease;
}

/* Main magical aura — follows cursor */
.storefront-page .button-primary::before,
.storefront-page .button-secondary::before,
.customer-realm-page .hb-arcane-action::before,
.staff-command-page .hb-arcane-action::before,
.form-submit::before,
.command-submit::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    opacity: var(--hb-aura-opacity);
    transform: scale(var(--hb-aura-scale));
    transition:
        opacity 0.20s ease,
        transform 0.24s ease;

    background:
        radial-gradient(
            90px 54px at var(--hb-x) var(--hb-y),
            rgba(202, 153, 255, 0.34) 0%,
            rgba(137, 102, 255, 0.26) 22%,
            rgba(87, 59, 201, 0.18) 42%,
            rgba(255, 214, 128, 0.10) 58%,
            rgba(255, 255, 255, 0.04) 68%,
            rgba(255, 255, 255, 0.00) 100%
        );

    filter: blur(10px);
}

/* Thin energy wake at the edge — not a solid frame */
.storefront-page .button-primary::after,
.storefront-page .button-secondary::after,
.customer-realm-page .hb-arcane-action::after,
.staff-command-page .hb-arcane-action::after,
.form-submit::after,
.command-submit::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    background:
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 18%,
            rgba(176, 139, 255, 0.00) 30%,
            rgba(182, 141, 255, 0.20) 40%,
            rgba(255, 221, 145, 0.30) 48%,
            rgba(195, 164, 255, 0.22) 56%,
            rgba(111, 85, 255, 0.00) 68%,
            transparent 82%,
            transparent 100%
        );
    background-size: 220% 100%;
    background-position: 140% 50%;
    mix-blend-mode: screen;
    transition: opacity 0.18s ease;
}

/* Keep label above glow layers */
.storefront-page .button-primary > *,
.storefront-page .button-secondary > *,
.customer-realm-page .hb-arcane-action > *,
.staff-command-page .hb-arcane-action > *,
.form-submit > *,
.command-submit > * {
    position: relative;
    z-index: 2;
}

/* Hover/focus = the magic wakes where the cursor is */
.storefront-page .button-primary:hover,
.storefront-page .button-primary:focus-visible,
.storefront-page .button-secondary:hover,
.storefront-page .button-secondary:focus-visible,
.customer-realm-page .hb-arcane-action:hover,
.customer-realm-page .hb-arcane-action:focus-visible,
.staff-command-page .hb-arcane-action:hover,
.staff-command-page .hb-arcane-action:focus-visible,
.form-submit:hover,
.form-submit:focus-visible,
.command-submit:hover,
.command-submit:focus-visible {
    transform: translateY(-1px);
}

/* Stronger primary aura */
.storefront-page .button-primary:hover::before,
.storefront-page .button-primary:focus-visible::before,
.customer-realm-page .hb-arcane-action:hover::before,
.customer-realm-page .hb-arcane-action:focus-visible::before,
.staff-command-page .hb-arcane-action:hover::before,
.staff-command-page .hb-arcane-action:focus-visible::before,
.form-submit:hover::before,
.form-submit:focus-visible::before,
.command-submit:hover::before,
.command-submit:focus-visible::before {
    --hb-aura-opacity: 1;
    --hb-aura-scale: 1.02;
}

/* Softer secondary/support aura */
.storefront-page .button-secondary:hover::before,
.storefront-page .button-secondary:focus-visible::before {
    --hb-aura-opacity: 0.78;
    --hb-aura-scale: 1.01;
}

/* Edge sweep while hovering */
.storefront-page .button-primary:hover::after,
.storefront-page .button-primary:focus-visible::after,
.storefront-page .button-secondary:hover::after,
.storefront-page .button-secondary:focus-visible::after,
.customer-realm-page .hb-arcane-action:hover::after,
.customer-realm-page .hb-arcane-action:focus-visible::after,
.staff-command-page .hb-arcane-action:hover::after,
.staff-command-page .hb-arcane-action:focus-visible::after,
.form-submit:hover::after,
.form-submit:focus-visible::after,
.command-submit:hover::after,
.command-submit:focus-visible::after {
    opacity: 1;
    animation: hbArcaneEdgeSweep 1.05s linear infinite;
}

/* Load-in awakening glow */
.hb-awaken::before {
    animation: hbArcaneAwakenAura 1.45s cubic-bezier(.22, .75, .24, 1) both;
    animation-delay: var(--hb-load-delay);
}

.hb-awaken::after {
    opacity: 1;
    animation:
        hbArcaneAwakenEdge 1.25s cubic-bezier(.22, .75, .24, 1) both;
    animation-delay: var(--hb-load-delay);
}

/* Primary stronger on first load */
.storefront-page .button-primary.hb-awaken::before,
.customer-realm-page .hb-arcane-action.hb-awaken::before,
.staff-command-page .hb-arcane-action.hb-awaken::before,
.form-submit.hb-awaken::before,
.command-submit.hb-awaken::before {
    filter: blur(12px);
}

/* Secondary/support softer on first load */
.storefront-page .button-secondary.hb-awaken::before {
    filter: blur(9px);
}

/* Keyframes */
@keyframes hbArcaneAwakenAura {
    0% {
        opacity: 0;
        transform: scale(0.90);
    }
    18% {
        opacity: calc(0.95 * var(--hb-load-strength));
        transform: scale(1.03);
    }
    52% {
        opacity: calc(0.55 * var(--hb-load-strength));
        transform: scale(1.00);
    }
    100% {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes hbArcaneAwakenEdge {
    0% {
        opacity: 0;
        background-position: 145% 50%;
    }
    18% {
        opacity: 0.95;
    }
    60% {
        opacity: 0.42;
    }
    100% {
        opacity: 0;
        background-position: -45% 50%;
    }
}

@keyframes hbArcaneEdgeSweep {
    0% {
        background-position: 135% 50%;
    }
    100% {
        background-position: -35% 50%;
    }
}

/* Optional stronger hover elevation for primary */
.storefront-page .button-primary:hover,
.storefront-page .button-primary:focus-visible,
.customer-realm-page .hb-arcane-action:hover,
.customer-realm-page .hb-arcane-action:focus-visible,
.staff-command-page .hb-arcane-action:hover,
.staff-command-page .hb-arcane-action:focus-visible,
.form-submit:hover,
.form-submit:focus-visible,
.command-submit:hover,
.command-submit:focus-visible {
    box-shadow:
        0 0 0 1px rgba(210, 178, 255, 0.18),
        0 10px 24px rgba(95, 53, 180, 0.20),
        0 0 22px rgba(160, 122, 255, 0.12);
}

/* Secondary more restrained */
.storefront-page .button-secondary:hover,
.storefront-page .button-secondary:focus-visible {
    box-shadow:
        0 0 0 1px rgba(219, 186, 123, 0.16),
        0 8px 18px rgba(100, 73, 24, 0.14),
        0 0 16px rgba(180, 132, 62, 0.09);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .storefront-page .button-primary,
    .storefront-page .button-secondary,
    .customer-realm-page .hb-arcane-action,
    .staff-command-page .hb-arcane-action,
    .form-submit,
    .command-submit,
    .storefront-page .button-primary::before,
    .storefront-page .button-primary::after,
    .storefront-page .button-secondary::before,
    .storefront-page .button-secondary::after,
    .customer-realm-page .hb-arcane-action::before,
    .customer-realm-page .hb-arcane-action::after,
    .staff-command-page .hb-arcane-action::before,
    .staff-command-page .hb-arcane-action::after,
    .form-submit::before,
    .form-submit::after,
    .command-submit::before,
    .command-submit::after {
        animation: none !important;
        transition: none !important;
    }

    .hb-awaken::before,
    .hb-awaken::after {
        opacity: 0 !important;
    }
}

/* =========================================================
   HUBBITS & MORDOCS — FINAL ARCANE ACTION SYSTEM
   First-load awakening + cursor-following energy +
   occasional idle awakenings. Brand aura remains untouched.
   ========================================================= */

@property --hb-x{
    syntax:"<percentage>";
    inherits:true;
    initial-value:50%;
}

@property --hb-y{
    syntax:"<percentage>";
    inherits:true;
    initial-value:50%;
}

/*
 * Neutralize the older broad RGB/conic action animations before
 * JavaScript enrolls safe buttons in the refined arcane system.
 */
.form-submit,
.command-submit,
.storefront-page .button-primary,
.storefront-page .button-secondary,
.customer-realm-page .hb-arcane-action,
.staff-command-page .hb-arcane-action{
    animation:none !important;
}

.form-submit::before,
.form-submit::after,
.command-submit::before,
.command-submit::after,
.storefront-page .button-primary::before,
.storefront-page .button-primary::after,
.storefront-page .button-secondary::before,
.storefront-page .button-secondary::after,
.customer-realm-page .hb-arcane-action::before,
.customer-realm-page .hb-arcane-action::after,
.staff-command-page .hb-arcane-action::before,
.staff-command-page .hb-arcane-action::after{
    animation:none !important;
    opacity:0;
}

/* ---------------------------------------------------------
   Enrolled action foundation
   --------------------------------------------------------- */

.hb-cursor-arcane{
    --hb-x:50%;
    --hb-y:50%;
    --hb-aura-opacity:0;
    --hb-aura-scale:.965;
    --hb-load-strength:1;
    --hb-idle-strength:.9;

    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
    animation:none !important;

    transition:
        --hb-x .085s linear,
        --hb-y .085s linear,
        transform .22s ease,
        border-color .28s ease,
        box-shadow .34s ease,
        background .28s ease,
        color .22s ease !important;
}

/* Primary action edge stays quiet until magic wakes. */
.hb-cursor-arcane:not(.button-secondary):not([data-arcane-level="secondary"]){
    border-color:rgba(164,119,219,.30) !important;
}

/* Supporting action keeps the softer antique-gold boundary. */
.hb-cursor-arcane.button-secondary,
.hb-cursor-arcane[data-arcane-level="secondary"]{
    border-color:rgba(206,169,103,.30) !important;
}

/* ---------------------------------------------------------
   Outer arcane bloom
   A feathered violet/indigo/rose/gold energy cloud,
   deliberately not a solid border.
   --------------------------------------------------------- */

.hb-cursor-arcane::before{
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    inset:-16px !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:inherit !important;
    pointer-events:none !important;

    background:
        radial-gradient(
            ellipse 62px 42px at var(--hb-x) var(--hb-y),
            rgba(255,242,255,.34) 0%,
            rgba(225,164,255,.37) 14%,
            rgba(166,112,255,.30) 31%,
            rgba(96,105,244,.20) 47%,
            rgba(226,123,224,.12) 59%,
            rgba(229,188,111,.075) 68%,
            transparent 80%
        ),
        radial-gradient(
            ellipse 106px 70px at var(--hb-x) var(--hb-y),
            rgba(135,88,255,.16) 0%,
            rgba(119,82,226,.105) 38%,
            rgba(219,116,204,.055) 58%,
            transparent 82%
        ) !important;

    background-position:center !important;
    background-size:auto !important;
    box-shadow:none !important;
    filter:blur(9px) saturate(1.12) !important;

    opacity:var(--hb-aura-opacity) !important;
    transform:scale(var(--hb-aura-scale)) !important;
    transform-origin:var(--hb-x) var(--hb-y) !important;
    animation:none !important;

    transition:
        opacity .44s ease,
        transform .34s ease,
        filter .34s ease !important;
}

/* ---------------------------------------------------------
   Thin edge-contact spark
   This is the tiny luminous grazing point that makes the aura
   feel attached to the button without becoming an RGB frame.
   --------------------------------------------------------- */

.hb-cursor-arcane::after{
    content:"" !important;
    position:absolute !important;
    z-index:3 !important;
    inset:-1px !important;
    width:auto !important;
    height:auto !important;
    padding:1px !important;
    border:0 !important;
    border-radius:inherit !important;
    pointer-events:none !important;

    background:
        radial-gradient(
            ellipse 50px 31px at var(--hb-x) var(--hb-y),
            rgba(255,248,255,.98) 0%,
            rgba(229,176,255,.92) 13%,
            rgba(171,116,255,.72) 29%,
            rgba(96,117,248,.46) 42%,
            rgba(230,134,221,.28) 52%,
            rgba(232,198,124,.17) 62%,
            transparent 75%
        ) !important;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    -webkit-mask-composite:xor !important;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) !important;
    mask-composite:exclude !important;

    box-shadow:none !important;
    filter:blur(.25px) drop-shadow(0 0 3px rgba(150,98,236,.30)) !important;
    opacity:var(--hb-aura-opacity) !important;
    transform:none !important;
    animation:none !important;

    transition:
        opacity .28s ease,
        filter .28s ease !important;
}

/* Secondary/supporting actions stay quieter than primary actions. */
.hb-cursor-arcane.button-secondary::before,
.hb-cursor-arcane[data-arcane-level="secondary"]::before{
    filter:blur(9px) saturate(1.03) !important;
}

.hb-cursor-arcane.button-secondary::after,
.hb-cursor-arcane[data-arcane-level="secondary"]::after{
    filter:blur(.3px) drop-shadow(0 0 2px rgba(154,108,213,.20)) !important;
}

/* Staff Command uses the same language with a more disciplined finish. */
.staff-command-page .hb-cursor-arcane::before{
    filter:blur(9px) saturate(1.02) !important;
}

/* ---------------------------------------------------------
   Pointer / keyboard presence
   JavaScript supplies the localized opacity and coordinates.
   --------------------------------------------------------- */

.hb-cursor-arcane:hover,
.hb-cursor-arcane:focus-visible{
    transform:translateY(-1px);
}

.hb-cursor-arcane:not(.button-secondary):not([data-arcane-level="secondary"]):hover,
.hb-cursor-arcane:not(.button-secondary):not([data-arcane-level="secondary"]):focus-visible{
    box-shadow:
        0 9px 24px rgba(0,0,0,.30),
        0 0 19px rgba(145,91,255,.11),
        0 0 7px rgba(226,190,119,.045) !important;
}

.hb-cursor-arcane.button-secondary:hover,
.hb-cursor-arcane.button-secondary:focus-visible,
.hb-cursor-arcane[data-arcane-level="secondary"]:hover,
.hb-cursor-arcane[data-arcane-level="secondary"]:focus-visible{
    box-shadow:
        0 7px 18px rgba(0,0,0,.25),
        0 0 14px rgba(156,108,230,.07),
        0 0 6px rgba(218,184,112,.045) !important;
}

/* ---------------------------------------------------------
   First-load awakening
   Brief outer aura, a gentle edge spark, then stillness.
   --------------------------------------------------------- */

.hb-cursor-arcane.hb-awaken{
    animation:
        hbArcaneButtonAwaken
        1.55s
        cubic-bezier(.18,.74,.22,1)
        var(--hb-load-delay,0ms)
        both !important;
}

.hb-cursor-arcane.hb-awaken::before{
    animation:
        hbArcaneAuraAwaken
        1.56s
        cubic-bezier(.18,.74,.22,1)
        var(--hb-load-delay,0ms)
        both !important;
}

.hb-cursor-arcane.hb-awaken::after{
    animation:
        hbArcaneEdgeAwaken
        1.34s
        cubic-bezier(.18,.74,.22,1)
        var(--hb-load-delay,0ms)
        both !important;
}

@keyframes hbArcaneButtonAwaken{
    0%,100%{
        transform:translateY(0);
    }
    34%{
        transform:translateY(-1px);
    }
}

@keyframes hbArcaneAuraAwaken{
    0%{
        opacity:0;
        transform:scale(.92);
        filter:blur(12px) saturate(1.02);
    }
    19%{
        opacity:calc(.96 * var(--hb-load-strength,1));
        transform:scale(1.025);
        filter:blur(8px) saturate(1.18);
    }
    42%{
        opacity:calc(.68 * var(--hb-load-strength,1));
        transform:scale(1.01);
        filter:blur(9px) saturate(1.13);
    }
    68%{
        opacity:calc(.32 * var(--hb-load-strength,1));
        transform:scale(1.025);
        filter:blur(11px) saturate(1.06);
    }
    100%{
        opacity:0;
        transform:scale(1.055);
        filter:blur(14px) saturate(1);
    }
}

@keyframes hbArcaneEdgeAwaken{
    0%{
        opacity:0;
        filter:blur(.4px) drop-shadow(0 0 1px rgba(149,98,236,.10));
    }
    21%{
        opacity:calc(.86 * var(--hb-load-strength,1));
        filter:blur(.2px) drop-shadow(0 0 4px rgba(174,117,255,.38));
    }
    48%{
        opacity:calc(.48 * var(--hb-load-strength,1));
    }
    100%{
        opacity:0;
        filter:blur(.55px) drop-shadow(0 0 2px rgba(221,185,113,.08));
    }
}

/* ---------------------------------------------------------
   Spontaneous idle awakening
   Only one visible eligible action is awakened at a time by JS.
   The glow begins at a random edge point, flickers softly like
   restrained arcane flame, then disperses completely.
   --------------------------------------------------------- */

.hb-cursor-arcane.hb-idle-awaken{
    animation:
        hbArcaneIdleButton
        1.86s
        cubic-bezier(.2,.68,.24,1)
        both !important;
}

.hb-cursor-arcane.hb-idle-awaken::before{
    animation:
        hbArcaneIdleBloom
        1.86s
        cubic-bezier(.2,.68,.24,1)
        both !important;
}

.hb-cursor-arcane.hb-idle-awaken::after{
    animation:
        hbArcaneIdleEdge
        1.68s
        cubic-bezier(.2,.68,.24,1)
        both !important;
}

@keyframes hbArcaneIdleButton{
    0%,100%{
        transform:translateY(0);
    }
    30%{
        transform:translateY(-.6px);
    }
    48%{
        transform:translateY(-1px);
    }
    70%{
        transform:translateY(-.35px);
    }
}

@keyframes hbArcaneIdleBloom{
    0%{
        opacity:0;
        transform:scale(.90);
        filter:blur(13px) saturate(1);
    }
    16%{
        opacity:calc(.48 * var(--hb-idle-strength,.9));
        transform:scale(.98);
        filter:blur(10px) saturate(1.12);
    }
    31%{
        opacity:calc(.94 * var(--hb-idle-strength,.9));
        transform:scale(1.035);
        filter:blur(8px) saturate(1.24);
    }
    43%{
        opacity:calc(.72 * var(--hb-idle-strength,.9));
        transform:scale(.995);
        filter:blur(9px) saturate(1.16);
    }
    56%{
        opacity:calc(.88 * var(--hb-idle-strength,.9));
        transform:scale(1.045);
        filter:blur(9px) saturate(1.20);
    }
    72%{
        opacity:calc(.38 * var(--hb-idle-strength,.9));
        transform:scale(1.07);
        filter:blur(12px) saturate(1.08);
    }
    100%{
        opacity:0;
        transform:scale(1.12);
        filter:blur(16px) saturate(1);
    }
}

@keyframes hbArcaneIdleEdge{
    0%{
        opacity:0;
        filter:blur(.45px) drop-shadow(0 0 1px rgba(154,102,236,.08));
    }
    20%{
        opacity:calc(.38 * var(--hb-idle-strength,.9));
    }
    34%{
        opacity:calc(.82 * var(--hb-idle-strength,.9));
        filter:blur(.15px) drop-shadow(0 0 5px rgba(180,121,255,.40));
    }
    48%{
        opacity:calc(.56 * var(--hb-idle-strength,.9));
    }
    61%{
        opacity:calc(.70 * var(--hb-idle-strength,.9));
        filter:blur(.25px) drop-shadow(0 0 4px rgba(225,171,231,.25));
    }
    100%{
        opacity:0;
        filter:blur(.7px) drop-shadow(0 0 2px rgba(226,190,116,.06));
    }
}

/* ---------------------------------------------------------
   Safety + accessibility
   --------------------------------------------------------- */

.hb-cursor-arcane:is(:disabled,.disabled-button,[aria-disabled="true"]),
.hb-cursor-arcane:is(:disabled,.disabled-button,[aria-disabled="true"])::before,
.hb-cursor-arcane:is(:disabled,.disabled-button,[aria-disabled="true"])::after{
    animation:none !important;
}

.hb-cursor-arcane:is(:disabled,.disabled-button,[aria-disabled="true"])::before,
.hb-cursor-arcane:is(:disabled,.disabled-button,[aria-disabled="true"])::after{
    display:none !important;
}

@media (prefers-reduced-motion:reduce){
    .hb-cursor-arcane,
    .hb-cursor-arcane::before,
    .hb-cursor-arcane::after{
        animation:none !important;
        transition:none !important;
    }

    .hb-cursor-arcane::before,
    .hb-cursor-arcane::after{
        opacity:0 !important;
    }

    .hb-cursor-arcane:focus-visible::before{
        opacity:.34 !important;
        transform:scale(1) !important;
    }

    .hb-cursor-arcane:focus-visible::after{
        opacity:.50 !important;
    }
}

/* =========================================================
   HUBBITS & MORDOCS — MAGIC PASS / CHECKPOINT 1
   Staff Command chamber awakening
   Clarity first. Magic second. Identity always.
   ========================================================= */

/*
 * The command deck already has a restrained hover language and
 * permission-aware operational states. This pass only adds a quiet
 * atmospheric pulse to the dashboard chamber cards.
 *
 * No transform animation is used here, so hover/focus lift remains
 * fully controlled by the existing interaction rules.
 */

.staff-command-page .staff-launch-icon{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 0 14px color-mix(in srgb, var(--card-accent) 8%, transparent);
    filter:saturate(.80);
}

.staff-command-page .staff-role-chip.role-owner{
    box-shadow:
        inset 0 0 14px rgba(201,169,107,.04),
        0 0 16px rgba(201,169,107,.035);
}

/*
 * One chamber at a time receives a brief arcane wake.
 * The long quiet interval keeps the command deck operational first.
 */
.staff-command-page .staff-launch-grid > .staff-launch-card::after{
    animation:hb-staff-chamber-wake 36s ease-in-out infinite;
}

.staff-command-page .staff-launch-grid > .staff-launch-card .staff-launch-icon{
    animation:hb-staff-sigil-wake 36s ease-in-out infinite;
}

.staff-command-page .staff-launch-grid > .staff-launch-card .staff-launch-count{
    animation:hb-staff-engraving-wake 36s ease-in-out infinite;
}

/* Stagger up to nine operational chambers without requiring JS. */
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(1)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(1) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(1) .staff-launch-count{
    animation-delay:2s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(2)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(2) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(2) .staff-launch-count{
    animation-delay:6s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(3)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(3) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(3) .staff-launch-count{
    animation-delay:10s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(4)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(4) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(4) .staff-launch-count{
    animation-delay:14s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(5)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(5) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(5) .staff-launch-count{
    animation-delay:18s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(6)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(6) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(6) .staff-launch-count{
    animation-delay:22s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(7)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(7) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(7) .staff-launch-count{
    animation-delay:26s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(8)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(8) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(8) .staff-launch-count{
    animation-delay:30s;
}

.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(9)::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(9) .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:nth-child(9) .staff-launch-count{
    animation-delay:34s;
}

@keyframes hb-staff-chamber-wake{
    0%, 8%, 100%{
        opacity:.54;
        filter:drop-shadow(0 0 0 color-mix(in srgb, var(--card-accent) 0%, transparent));
    }

    2.2%{
        opacity:.72;
        filter:drop-shadow(0 0 4px color-mix(in srgb, var(--card-accent) 18%, transparent));
    }

    4.4%{
        opacity:.88;
        filter:drop-shadow(0 0 8px color-mix(in srgb, var(--card-accent) 22%, transparent));
    }

    6.2%{
        opacity:.66;
        filter:drop-shadow(0 0 4px color-mix(in srgb, var(--card-accent) 12%, transparent));
    }
}

@keyframes hb-staff-sigil-wake{
    0%, 8%, 100%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.025),
            0 0 14px color-mix(in srgb, var(--card-accent) 8%, transparent);
        filter:saturate(.80);
    }

    2.2%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.035),
            0 0 18px color-mix(in srgb, var(--card-accent) 15%, transparent);
        filter:saturate(.88);
    }

    4.4%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            0 0 24px color-mix(in srgb, var(--card-accent) 20%, transparent),
            0 0 7px rgba(232,207,151,.045);
        filter:saturate(.96);
    }

    6.2%{
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.03),
            0 0 17px color-mix(in srgb, var(--card-accent) 12%, transparent);
        filter:saturate(.84);
    }
}

@keyframes hb-staff-engraving-wake{
    0%, 8%, 100%{
        text-shadow:none;
    }

    2.2%{
        text-shadow:0 0 7px color-mix(in srgb, var(--card-accent) 18%, transparent);
    }

    4.4%{
        text-shadow:
            0 0 10px color-mix(in srgb, var(--card-accent) 22%, transparent),
            0 0 4px rgba(232,207,151,.10);
    }

    6.2%{
        text-shadow:0 0 6px color-mix(in srgb, var(--card-accent) 12%, transparent);
    }
}

/*
 * Hover/focus should feel immediate rather than waiting for the idle
 * cadence. Pausing does not change layout or override alert bubbles.
 */
.staff-command-page .staff-launch-grid > .staff-launch-card:hover::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:focus-visible::after,
.staff-command-page .staff-launch-grid > .staff-launch-card:hover .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:focus-visible .staff-launch-icon,
.staff-command-page .staff-launch-grid > .staff-launch-card:hover .staff-launch-count,
.staff-command-page .staff-launch-grid > .staff-launch-card:focus-visible .staff-launch-count{
    animation-play-state:paused;
}

@media(prefers-reduced-motion:reduce){
    .staff-command-page .staff-launch-grid > .staff-launch-card::after,
    .staff-command-page .staff-launch-grid > .staff-launch-card .staff-launch-icon,
    .staff-command-page .staff-launch-grid > .staff-launch-card .staff-launch-count{
        animation:none !important;
    }
}

/* =========================================================
   HUBBITS & MORDOCS — MAGIC PASS / CHECKPOINT 2
   Customer Realm atmosphere
   A warmer traveler-side glow without changing structure.
   ========================================================= */

/*
 * The Customer Realm keeps the same hierarchy, spacing, buttons,
 * semantic states, and workflows. This pass only gives the welcome
 * crest and chamber sigils a softer violet + antique-gold presence.
 */

.customer-realm-page .customer-realm-hero{
    box-shadow:
        var(--hb-shadow),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.customer-realm-page .customer-realm-hero__crest{
    animation:hb-customer-realm-heartbeat 14s ease-in-out infinite;
}

/*
 * The four traveler chambers wake one by one. Each wake is brief;
 * the realm spends most of its time quiet.
 */
.customer-realm-page .customer-action-grid > .customer-action-card .customer-action-sigil{
    animation:hb-customer-sigil-wake 28s ease-in-out infinite;
}

.customer-realm-page .customer-action-grid > .customer-action-card::after{
    animation:hb-customer-chamber-ring 28s ease-in-out infinite;
}

.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(1) .customer-action-sigil,
.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(1)::after{
    animation-delay:1.5s;
}

.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(2) .customer-action-sigil,
.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(2)::after{
    animation-delay:8.5s;
}

.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(3) .customer-action-sigil,
.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(3)::after{
    animation-delay:15.5s;
}

.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(4) .customer-action-sigil,
.customer-realm-page .customer-action-grid > .customer-action-card:nth-child(4)::after{
    animation-delay:22.5s;
}

/*
 * Dashboard stat rails breathe very gently so the realm feels alive
 * without competing with semantic state colors or actionable buttons.
 */
.customer-realm-page .customer-dashboard-grid > .customer-stat-card::before{
    animation:hb-customer-stat-breathe 16s ease-in-out infinite;
}

.customer-realm-page .customer-dashboard-grid > .customer-stat-card:nth-child(2)::before{
    animation-delay:2.6s;
}

.customer-realm-page .customer-dashboard-grid > .customer-stat-card:nth-child(3)::before{
    animation-delay:5.2s;
}

@keyframes hb-customer-realm-heartbeat{
    0%, 64%, 100%{
        border-color:rgba(201,169,107,.45);
        box-shadow:
            0 0 0 7px rgba(201,169,107,.025),
            0 0 28px rgba(156,108,255,.13);
        background:
            radial-gradient(circle, rgba(156,108,255,.20), transparent 70%),
            #100d17;
    }

    72%{
        border-color:rgba(232,207,151,.58);
        box-shadow:
            0 0 0 7px rgba(201,169,107,.035),
            0 0 34px rgba(156,108,255,.18),
            0 0 12px rgba(232,207,151,.06);
        background:
            radial-gradient(circle, rgba(172,123,255,.24), transparent 70%),
            #110e19;
    }

    80%{
        border-color:rgba(201,169,107,.49);
        box-shadow:
            0 0 0 7px rgba(201,169,107,.028),
            0 0 30px rgba(156,108,255,.145);
    }
}

@keyframes hb-customer-sigil-wake{
    0%, 12%, 100%{
        border-color:rgba(201,169,107,.26);
        background:rgba(156,108,255,.07);
        box-shadow:none;
        color:var(--hb-gold-bright);
        filter:saturate(.94);
    }

    3.5%{
        border-color:rgba(232,207,151,.38);
        background:
            radial-gradient(circle at 50% 42%, rgba(173,120,255,.15), transparent 66%),
            rgba(201,169,107,.055);
        box-shadow:
            0 0 16px rgba(156,108,255,.10),
            inset 0 0 10px rgba(201,169,107,.035);
        color:#f0dca8;
        filter:saturate(1);
    }

    6%{
        border-color:rgba(232,207,151,.50);
        background:
            radial-gradient(circle at 50% 42%, rgba(173,120,255,.20), transparent 66%),
            rgba(201,169,107,.065);
        box-shadow:
            0 0 22px rgba(156,108,255,.14),
            0 0 7px rgba(232,207,151,.06),
            inset 0 0 11px rgba(201,169,107,.04);
        color:#f4e2b5;
        filter:saturate(1.04);
    }

    9%{
        border-color:rgba(201,169,107,.32);
        background:rgba(156,108,255,.085);
        box-shadow:0 0 12px rgba(156,108,255,.075);
        color:var(--hb-gold-bright);
        filter:saturate(.98);
    }
}

@keyframes hb-customer-chamber-ring{
    0%, 12%, 100%{
        border-color:rgba(197,168,255,.08);
        box-shadow:none;
        opacity:1;
    }

    4%{
        border-color:rgba(197,168,255,.12);
        box-shadow:0 0 16px rgba(156,108,255,.035);
        opacity:1;
    }

    6.5%{
        border-color:rgba(232,207,151,.14);
        box-shadow:
            0 0 20px rgba(156,108,255,.045),
            inset 0 0 14px rgba(201,169,107,.02);
        opacity:1;
    }

    9.5%{
        border-color:rgba(197,168,255,.09);
        box-shadow:0 0 10px rgba(156,108,255,.025);
        opacity:1;
    }
}

@keyframes hb-customer-stat-breathe{
    0%, 60%, 100%{
        box-shadow:0 0 18px var(--realm-accent, var(--hb-violet));
        opacity:.88;
    }

    72%{
        box-shadow:
            0 0 22px var(--realm-accent, var(--hb-violet)),
            0 0 7px rgba(232,207,151,.05);
        opacity:1;
    }

    84%{
        box-shadow:0 0 19px var(--realm-accent, var(--hb-violet));
        opacity:.93;
    }
}

@media(prefers-reduced-motion:reduce){
    .customer-realm-page .customer-realm-hero__crest,
    .customer-realm-page .customer-action-grid > .customer-action-card .customer-action-sigil,
    .customer-realm-page .customer-action-grid > .customer-action-card::after,
    .customer-realm-page .customer-dashboard-grid > .customer-stat-card::before{
        animation:none !important;
    }
}

/* =========================================================
   HUBBITS & MORDOCS — MAGIC PASS / CHECKPOINT 3A
   THE STOREFRONT GATEWAY
   Fantasy is the atmosphere. Practical technology is the purpose.
   ========================================================= */

/* ---------------------------------------------------------
   Shared public/customer gateway header
   --------------------------------------------------------- */

.site-header--gateway{
    border-bottom:1px solid rgba(226,207,255,.10);
    background:
        linear-gradient(180deg, rgba(5,4,8,.96), rgba(7,6,10,.91));
    box-shadow:0 14px 46px rgba(0,0,0,.34);
}

.home-page .site-header--gateway{
    position:absolute;
    top:0;
    right:0;
    left:0;
    background:
        linear-gradient(
            180deg,
            rgba(4,3,6,.96) 0%,
            rgba(5,4,8,.84) 72%,
            rgba(5,4,8,.58) 100%
        );
    box-shadow:none;
    backdrop-filter:blur(13px);
}

.site-header--gateway .site-header__inner{
    width:min(96%, 1560px);
    max-width:1560px;
    min-height:90px;
    gap:28px;
    padding:12px 0;
}

.site-header--gateway .site-header__aura::before{
    width:500px;
    height:170px;
    top:-118px;
    left:13%;
    background:rgba(123,66,222,.18);
    filter:blur(62px);
}

.site-header--gateway .site-brand{
    gap:14px;
}

.site-header--gateway .site-brand__sigil{
    width:58px;
    height:58px;
    flex-basis:58px;
    border-color:rgba(232,207,151,.46);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 46%, rgba(156,108,255,.16), transparent 61%),
        rgba(8,7,12,.74);
    box-shadow:
        inset 0 0 0 1px rgba(201,169,107,.05),
        inset 0 0 18px rgba(156,108,255,.045),
        0 0 22px rgba(156,108,255,.10);
}

.site-header--gateway .site-brand__sigil::after{
    inset:7px;
    border-color:rgba(201,169,107,.18);
    border-radius:50%;
}

.site-header--gateway .site-brand__sigil svg{
    width:50px;
    height:50px;
    overflow:visible;
    fill:none;
    filter:drop-shadow(0 0 7px rgba(156,108,255,.17));
}

.site-header--gateway .site-brand__sigil .crest-ring{
    fill:none;
    stroke:rgba(232,207,151,.74);
    stroke-width:.85;
}

.site-header--gateway .site-brand__sigil .crest-ring--inner{
    stroke:rgba(197,168,255,.28);
}

.site-header--gateway .site-brand__sigil .crest-flourish{
    fill:none;
    stroke:rgba(201,169,107,.58);
    stroke-width:.9;
    stroke-linecap:round;
}

.site-header--gateway .site-brand__sigil .crest-monogram{
    fill:var(--hb-gold-bright);
    stroke:none;
    font-family:Georgia, "Times New Roman", serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
}

.site-header--gateway .site-brand__name{
    display:flex;
    align-items:baseline;
    gap:6px;
    color:var(--hb-gold-bright);
    font-size:clamp(23px, 2vw, 31px);
    letter-spacing:-.01em;
}

.site-header--gateway .site-brand__name em{
    color:var(--hb-gold);
}

.site-header--gateway .site-brand__name .site-brand__mordocs{
    background:linear-gradient(90deg, #c7a8ff, #a874e7 70%, #d4b7ff);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.site-header--gateway .site-brand__tagline{
    margin-top:6px;
    color:#8f8798;
    font-size:8px;
    letter-spacing:.20em;
}

.site-header--gateway .site-nav{
    gap:4px;
}

.site-header--gateway .site-nav__link{
    min-height:42px;
    padding:9px 12px;
    color:#c5becd;
    font-size:13px;
    font-weight:650;
}

.site-header--gateway .site-nav__link::after{
    right:12px;
    bottom:4px;
    left:12px;
    background:linear-gradient(90deg, transparent, var(--hb-gold-bright), transparent);
}

.site-header--gateway .site-nav__link:hover,
.site-header--gateway .site-nav__link:focus-visible,
.site-header--gateway .site-nav__link.is-active{
    background:rgba(156,108,255,.045);
}

.site-nav__utility{
    position:relative;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:8px 9px;
    border:1px solid transparent;
    border-radius:10px;
    color:#bbb3c4;
    font-family:var(--hb-ui);
    font-size:11px;
    font-weight:750;
    text-decoration:none;
    white-space:nowrap;
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.site-nav__utility svg,
.site-nav__account-icon{
    width:21px;
    height:21px;
    flex:0 0 21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.site-nav__utility:hover,
.site-nav__utility:focus-visible,
.site-nav__utility.is-active{
    border-color:rgba(201,169,107,.22);
    background:rgba(201,169,107,.055);
    color:var(--hb-gold-bright);
    text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 9px 22px rgba(0,0,0,.16);
}

.site-nav__utility:focus-visible{
    outline:3px solid rgba(197,168,255,.22);
    outline-offset:2px;
}

.site-header--gateway .site-nav__account{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-left:2px;
    padding:8px 12px;
    border-radius:10px;
    font-size:11px;
    font-weight:780;
}

.site-header--gateway .site-nav__account--login{
    border-color:rgba(201,169,107,.36);
    background:rgba(201,169,107,.065);
    color:var(--hb-gold-bright);
}

.site-header--gateway .site-nav__account--logout{
    border-color:rgba(201,169,107,.31) !important;
    background:
        linear-gradient(135deg, rgba(201,169,107,.09), rgba(156,108,255,.035)) !important;
    color:var(--hb-gold-bright);
}

.site-header--gateway .site-nav__account--logout:hover,
.site-header--gateway .site-nav__account--logout:focus-visible{
    border-color:rgba(232,207,151,.55) !important;
    background:
        linear-gradient(135deg, rgba(201,169,107,.15), rgba(156,108,255,.07)) !important;
    color:#fff4d1;
}

.site-header--gateway .site-language-switch{
    margin:0 2px;
    background:rgba(7,6,10,.56);
}

/* ---------------------------------------------------------
   Homepage gateway composition
   --------------------------------------------------------- */

.home-gateway{
    min-height:clamp(760px, 88vh, 920px);
    align-items:stretch;
}

.home-gateway::before{
    background:
        linear-gradient(
            90deg,
            rgba(3,3,5,.995) 0%,
            rgba(5,4,8,.97) 21%,
            rgba(6,5,9,.88) 35%,
            rgba(7,6,10,.58) 47%,
            rgba(7,6,10,.20) 61%,
            rgba(7,6,10,.02) 78%
        ),
        linear-gradient(
            0deg,
            rgba(4,3,6,.86) 0%,
            rgba(4,3,6,.30) 26%,
            rgba(4,3,6,.06) 54%,
            rgba(4,3,6,.25) 100%
        );
}

.home-gateway::after{
    background:
        radial-gradient(
            circle at 69% 25%,
            rgba(139,72,246,.13),
            transparent 22%
        ),
        radial-gradient(
            circle at 72% 67%,
            rgba(156,108,255,.07),
            transparent 26%
        ),
        linear-gradient(
            115deg,
            transparent 52%,
            rgba(201,169,107,.025) 71%,
            transparent 85%
        );
    mix-blend-mode:screen;
}

.home-gateway .home-hero__art img{
    object-position:center center;
    transform:scale(1.006);
}

.home-gateway__layout{
    min-height:inherit;
    display:flex;
    align-items:center;
    padding-top:148px !important;
    padding-bottom:72px !important;
}

.home-gateway__content{
    width:min(46%, 660px);
    max-width:660px;
    padding-left:2px;
}

.home-gateway__welcome{
    display:flex;
    align-items:center;
    gap:13px;
    margin:0 0 19px;
    color:#c7a7ee;
    font-family:var(--hb-ui);
    font-size:11px;
    font-weight:850;
    letter-spacing:.35em;
    text-transform:uppercase;
    text-shadow:0 0 18px rgba(156,108,255,.20);
}

.home-gateway__welcome-mark{
    width:45px;
    height:20px;
    display:inline-flex;
    align-items:center;
    color:var(--hb-gold-bright);
}

.home-gateway__welcome-mark svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 5px rgba(201,169,107,.16));
}

.home-gateway__title{
    max-width:650px !important;
    margin:0 !important;
    font-size:clamp(62px, 5.65vw, 92px) !important;
    font-weight:600 !important;
    line-height:.96 !important;
    letter-spacing:-.038em !important;
    text-shadow:0 4px 40px rgba(0,0,0,.72) !important;
}

.home-gateway__title .home-gateway__title-hubbits,
.home-gateway__title .home-gateway__title-mordocs{
    display:block;
    width:max-content;
    max-width:100%;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.home-gateway__title .home-gateway__title-hubbits{
    background-image:linear-gradient(
        100deg,
        #e8cf97 0%,
        #c9a96b 42%,
        #f0dda9 68%,
        #bc9856 100%
    );
}

.home-gateway__title .home-gateway__title-mordocs{
    margin-top:7px;
    background-image:linear-gradient(
        100deg,
        #cdb3ff 0%,
        #a679e5 46%,
        #c5a8ff 74%,
        #9667d4 100%
    );
    text-shadow:none;
}

.home-gateway__ornament{
    width:min(100%, 390px);
    display:grid;
    grid-template-columns:1fr 34px 1fr;
    align-items:center;
    gap:11px;
    margin:26px 0 0;
    color:var(--hb-gold-bright);
}

.home-gateway__ornament > span{
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(232,207,151,.75));
}

.home-gateway__ornament > span:last-child{
    background:linear-gradient(90deg, rgba(232,207,151,.75), transparent);
}

.home-gateway__ornament svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:1;
    filter:drop-shadow(0 0 7px rgba(156,108,255,.22));
}

.home-gateway__lead{
    max-width:520px !important;
    margin-top:20px !important;
    color:#b7afbf !important;
    font-size:clamp(16px, 1.32vw, 20px) !important;
    line-height:1.62 !important;
}

.home-gateway__actions{
    margin-top:30px;
}

.home-gateway__actions .button{
    min-width:184px;
    min-height:54px;
    padding:13px 20px;
    border-radius:8px;
    font-size:13px;
    letter-spacing:.01em;
}

.home-gateway__actions .button-secondary{
    min-width:176px;
    background:rgba(12,9,17,.68);
}

.home-gateway__button-icon{
    width:20px;
    height:20px;
    display:inline-flex;
}

.home-gateway__button-icon svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.home-gateway__assurances{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0;
    width:min(100%, 575px);
    margin-top:66px;
    color:#a49cab;
    font-size:12px;
    font-weight:500;
}

.home-gateway__assurances li{
    min-width:0;
    display:grid;
    grid-template-columns:42px minmax(0, 1fr);
    align-items:center;
    gap:11px;
    padding:0 17px;
    border-right:1px solid rgba(201,169,107,.18);
}

.home-gateway__assurances li:first-child{
    padding-left:0;
}

.home-gateway__assurances li:last-child{
    padding-right:0;
    border-right:0;
}

.home-gateway__assurances li > span:last-child{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.home-gateway__assurances strong{
    color:#ddd5e3;
    font-size:11px;
    font-weight:800;
    line-height:1.25;
}

.home-gateway__assurances small{
    color:#817987;
    font-size:10px;
    line-height:1.35;
}

.home-gateway__assurance-icon{
    width:40px !important;
    height:40px !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--hb-gold-bright) !important;
}

.home-gateway__assurance-icon svg{
    width:30px;
    height:30px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.35;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:
        drop-shadow(0 0 4px rgba(201,169,107,.13))
        drop-shadow(0 0 8px rgba(156,108,255,.08));
}

/* ---------------------------------------------------------
   Responsive gateway behavior
   --------------------------------------------------------- */

@media(max-width:1180px) and (min-width:981px){
    .site-header--gateway .site-header__inner{
        width:calc(100% - 28px);
        gap:18px;
    }

    .site-header--gateway .site-brand__name{
        font-size:23px;
    }

    .site-header--gateway .site-brand__tagline{
        font-size:7px;
    }

    .site-nav__utility-label{
        display:none;
    }

    .site-nav__utility{
        width:40px;
        padding-inline:7px;
    }

    .site-header--gateway .site-nav__link{
        padding-inline:8px;
        font-size:12px;
    }
}

@media(max-width:980px){
    .site-header--gateway .site-header__inner{
        min-height:78px;
    }

    .site-header--gateway .site-brand__sigil{
        width:50px;
        height:50px;
        flex-basis:50px;
    }

    .site-header--gateway .site-brand__sigil svg{
        width:43px;
        height:43px;
    }

    .site-header--gateway .site-brand__name{
        font-size:23px;
    }

    .site-nav-shell[open] > .site-nav--gateway{
        width:min(390px, calc(100vw - 28px));
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .site-nav-shell[open] .site-nav__utility{
        min-height:45px;
        justify-content:flex-start;
        gap:9px;
        padding:10px 12px;
        border-color:rgba(226,207,255,.08);
        background:rgba(255,255,255,.022);
        white-space:normal;
    }

    .site-nav-shell[open] .site-nav__utility-label{
        display:inline;
    }

    .site-nav-shell[open] .site-language-switch{
        align-self:center;
        justify-self:start;
    }

    .home-gateway{
        min-height:760px;
    }

    .home-gateway__layout{
        padding-top:130px !important;
        padding-bottom:70px !important;
    }

    .home-gateway__content{
        width:min(57%, 590px);
    }

    .home-gateway__title{
        font-size:clamp(54px, 7vw, 76px) !important;
    }

    .home-gateway__assurances{
        margin-top:48px;
    }
}

@media(max-width:760px){
    .home-page .site-header--gateway{
        position:absolute;
    }

    .home-gateway{
        min-height:800px;
    }

    .home-gateway::before{
        background:
            linear-gradient(
                90deg,
                rgba(3,3,5,.985) 0%,
                rgba(5,4,8,.94) 45%,
                rgba(6,5,9,.66) 72%,
                rgba(6,5,9,.40) 100%
            ),
            linear-gradient(
                0deg,
                rgba(4,3,6,.94) 0%,
                rgba(4,3,6,.34) 48%,
                rgba(4,3,6,.46) 100%
            );
    }

    .home-gateway .home-hero__art img{
        object-position:70% center;
        opacity:.66;
    }

    .home-gateway__content{
        width:100%;
        max-width:610px;
    }

    .home-gateway__title{
        font-size:clamp(51px, 11.6vw, 74px) !important;
    }

    .home-gateway__lead{
        max-width:500px !important;
    }

    .home-gateway__assurances{
        width:100%;
        grid-template-columns:1fr;
        gap:12px;
        margin-top:44px;
    }

    .home-gateway__assurances li{
        grid-template-columns:37px minmax(0, 1fr);
        padding:0 0 12px;
        border-right:0;
        border-bottom:1px solid rgba(201,169,107,.12);
    }

    .home-gateway__assurances li:last-child{
        padding-bottom:0;
        border-bottom:0;
    }

    .home-gateway__assurance-icon{
        width:34px !important;
        height:34px !important;
    }

    .home-gateway__assurance-icon svg{
        width:27px;
        height:27px;
    }
}

@media(max-width:540px){
    .site-header--gateway .site-brand{
        gap:9px;
    }

    .site-header--gateway .site-brand__sigil{
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    .site-header--gateway .site-brand__sigil svg{
        width:38px;
        height:38px;
    }

    .site-header--gateway .site-brand__name{
        gap:4px;
        font-size:20px;
    }

    .site-header--gateway .site-brand__tagline{
        display:none;
    }

    .home-gateway{
        min-height:850px;
    }

    .home-gateway__layout{
        align-items:flex-start;
        padding-top:135px !important;
        padding-bottom:55px !important;
    }

    .home-gateway__welcome{
        gap:9px;
        margin-bottom:15px;
        font-size:9px;
        letter-spacing:.28em;
    }

    .home-gateway__welcome-mark{
        width:36px;
    }

    .home-gateway__title{
        font-size:clamp(47px, 14vw, 64px) !important;
    }

    .home-gateway__ornament{
        width:min(100%, 300px);
        margin-top:21px;
    }

    .home-gateway__lead{
        margin-top:17px !important;
        font-size:15px !important;
    }

    .home-gateway__actions{
        width:100%;
        margin-top:25px;
    }

    .home-gateway__actions .button{
        width:100%;
        min-width:0;
    }
}

@media(prefers-reduced-motion:reduce){
    .site-header--gateway .site-brand__sigil,
    .site-header--gateway .site-brand__name{
        animation:none !important;
    }
}

/* =========================================================
   STOREFRONT GATEWAY — CHECKPOINT 3A.1
   Assurance-row correction only.
   Resets legacy .hero-assurances span dimensions so the
   new two-line assurance copy can use its natural width.
   ========================================================= */

.home-gateway__assurances li > span:last-child{
    width:auto !important;
    height:auto !important;
    min-width:0;
    display:flex !important;
    place-items:initial !important;
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
    padding:0;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:inherit !important;
    font-size:inherit !important;
}

.home-gateway__assurances li > .home-gateway__assurance-icon{
    width:40px !important;
    height:40px !important;
    flex:0 0 40px;
}

.home-gateway__assurances strong,
.home-gateway__assurances small{
    display:block;
    width:auto;
    height:auto;
    border:0;
    background:transparent;
}

@media(max-width:760px){
    .home-gateway__assurances li > .home-gateway__assurance-icon{
        width:34px !important;
        height:34px !important;
        flex-basis:34px;
    }
}

/* =========================================================
   STOREFRONT GATEWAY — PRESENCE PASS v4.6
   Dual-realm brand awakening + cinematic homepage header retreat.
   Clarity first. Magic second. Identity always.
   ========================================================= */

/* ---------------------------------------------------------
   Dual-realm brand awakening
   HubBits warms through antique gold; MorDocs answers in violet.
   --------------------------------------------------------- */

.site-header--gateway .site-brand__name{
    animation:hb-gateway-hubbits-breathe 12.8s ease-in-out 1.1s infinite;
}

.site-header--gateway .site-brand__name .site-brand__mordocs{
    background-size:220% 100%;
    background-position:0% 50%;
    text-shadow:none;
    filter:brightness(1);
    animation:hb-gateway-mordocs-breathe 12.8s ease-in-out 1.1s infinite;
    will-change:background-position, filter;
}

.site-header--gateway .site-brand:hover .site-brand__name,
.site-header--gateway .site-brand:focus-visible .site-brand__name,
.site-header--gateway .site-brand:hover .site-brand__mordocs,
.site-header--gateway .site-brand:focus-visible .site-brand__mordocs{
    animation-play-state:paused;
}

@keyframes hb-gateway-hubbits-breathe{
    0%, 58%, 100%{
        color:#e8cf97;
        text-shadow:
            0 1px 16px rgba(154,104,234,.07),
            0 0 0 rgba(232,207,151,0);
    }

    68%{
        color:#f5e4b7;
        text-shadow:
            0 0 7px rgba(232,207,151,.14),
            0 0 17px rgba(184,135,255,.12);
    }

    76%{
        color:#d5b46e;
        text-shadow:
            0 0 10px rgba(232,207,151,.18),
            0 0 21px rgba(151,103,238,.16);
    }

    85%{
        color:#efe0b2;
        text-shadow:
            0 0 6px rgba(232,207,151,.10),
            0 0 14px rgba(151,103,238,.08);
    }
}

@keyframes hb-gateway-mordocs-breathe{
    0%, 64%, 100%{
        background-position:0% 50%;
        filter:
            brightness(1)
            saturate(1)
            drop-shadow(0 0 0 rgba(164,102,255,0));
    }

    72%{
        background-position:38% 50%;
        filter:
            brightness(1.08)
            saturate(1.06)
            drop-shadow(0 0 5px rgba(164,102,255,.13));
    }

    80%{
        background-position:100% 50%;
        filter:
            brightness(1.16)
            saturate(1.12)
            drop-shadow(0 0 8px rgba(174,112,255,.22))
            drop-shadow(0 0 14px rgba(215,112,198,.08));
    }

    88%{
        background-position:70% 50%;
        filter:
            brightness(1.06)
            saturate(1.04)
            drop-shadow(0 0 5px rgba(164,102,255,.10));
    }
}

/* ---------------------------------------------------------
   Cinematic homepage header retreat
   Desktop/fine-pointer only; JS owns the state class.
   --------------------------------------------------------- */

.home-page .site-header--gateway{
    transform:translateY(0);
    transition:
        transform .72s cubic-bezier(.22,.72,.22,1),
        border-color .45s ease,
        box-shadow .45s ease;
    will-change:transform;
}

.home-page .site-header--gateway.is-gateway-header-retreated{
    transform:translateY(calc(-100% + 5px));
    border-bottom-color:rgba(201,169,107,.16);
    box-shadow:
        0 2px 8px rgba(156,108,255,.08),
        0 1px 3px rgba(201,169,107,.06);
}

@media(max-width:760px){
    .home-page .site-header--gateway,
    .home-page .site-header--gateway.is-gateway-header-retreated{
        transform:none !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .site-header--gateway .site-brand__name,
    .site-header--gateway .site-brand__name .site-brand__mordocs{
        animation:none !important;
        transition:none !important;
    }

    .home-page .site-header--gateway,
    .home-page .site-header--gateway.is-gateway-header-retreated{
        transform:none !important;
        transition:none !important;
    }
}

/* =========================================================
   LIVING WORLD v5 — HERO FRAMING PASS
   Preserve the final artwork before awakening calibration.
   Clarity first. Magic second. Identity always.
   ========================================================= */

@media (min-width:981px){

    /*
     * Follow the native 1672 × 941 artwork ratio much more
     * closely on desktop so the scene is not vertically crushed.
     */
    .home-page .home-gateway{
        min-height:clamp(760px, 56.28vw, 1000px);
    }

    /*
     * Remove the old cinematic enlargement.
     * Keep cover for a seamless full-bleed hero, but allow the
     * increased hero height above to expose substantially more art.
     */
    .home-page .home-gateway .home-hero__art img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
        transform:none;
    }

    /*
     * Keep a readable chamber behind the HTML copy without
     * swallowing the tower, tablet HubBit, lantern and workshop.
     */
    .home-page .home-gateway::before{
        background:
            linear-gradient(
                90deg,
                rgba(3,3,5,.96) 0%,
                rgba(5,4,8,.86) 18%,
                rgba(6,5,9,.68) 31%,
                rgba(7,6,10,.43) 43%,
                rgba(7,6,10,.16) 57%,
                rgba(7,6,10,.025) 72%,
                rgba(7,6,10,0) 84%
            ),
            linear-gradient(
                0deg,
                rgba(4,3,6,.70) 0%,
                rgba(4,3,6,.22) 24%,
                rgba(4,3,6,.045) 54%,
                rgba(4,3,6,.18) 100%
            );
    }
}


/* =========================================================
   STOREFRONT GATEWAY — HERO NAME COLOR BREATHING v5.9
   The header brand already breathes in Presence Pass v4.6.
   This completes the missing large hero store-name response.
   No movement or scale: color/reflected luminosity only.
   Clarity first. Magic second. Identity always.
   ========================================================= */

.home-page .home-gateway__title .home-gateway__title-hubbits,
.home-page .home-gateway__title .home-gateway__title-mordocs{
    background-size:190% 100%;
    background-repeat:no-repeat;
    will-change:background-position, filter;
}

.home-page .home-gateway__title .home-gateway__title-hubbits{
    animation:hb-gateway-hero-hubbits-breathe 16.8s ease-in-out 1.4s infinite;
}

.home-page .home-gateway__title .home-gateway__title-mordocs{
    animation:hb-gateway-hero-mordocs-breathe 16.8s ease-in-out 1.4s infinite;
}

@keyframes hb-gateway-hero-hubbits-breathe{
    0%, 50%, 100%{
        background-position:0% 50%;
        filter:brightness(1) saturate(1);
    }

    61%{
        background-position:24% 50%;
        filter:brightness(1.035) saturate(1.025);
    }

    70%{
        background-position:72% 50%;
        filter:
            brightness(1.075)
            saturate(1.055)
            drop-shadow(0 0 5px rgba(232,207,151,.10));
    }

    79%{
        background-position:100% 50%;
        filter:brightness(1.035) saturate(1.02);
    }

    88%{
        background-position:28% 50%;
        filter:brightness(1) saturate(1);
    }
}

@keyframes hb-gateway-hero-mordocs-breathe{
    0%, 12%, 54%, 100%{
        background-position:0% 50%;
        filter:brightness(1) saturate(1);
    }

    21%{
        background-position:30% 50%;
        filter:brightness(1.04) saturate(1.035);
    }

    31%{
        background-position:84% 50%;
        filter:
            brightness(1.085)
            saturate(1.075)
            drop-shadow(0 0 6px rgba(166,121,229,.11));
    }

    41%{
        background-position:100% 50%;
        filter:brightness(1.035) saturate(1.025);
    }
}

@media(prefers-reduced-motion:reduce){
    .home-page .home-gateway__title .home-gateway__title-hubbits,
    .home-page .home-gateway__title .home-gateway__title-mordocs{
        animation:none !important;
        filter:none !important;
        background-position:0% 50% !important;
    }
}