/* TNA Mobile Core V4 — one lightweight mobile contract, loaded after legacy layers. */
:root {
    --tna-v4-gutter: clamp(14px, 4vw, 24px);
    --tna-v4-safe-top: env(safe-area-inset-top, 0px);
    --tna-v4-safe-right: env(safe-area-inset-right, 0px);
    --tna-v4-safe-bottom: env(safe-area-inset-bottom, 0px);
    --tna-v4-safe-left: env(safe-area-inset-left, 0px);
    --tna-v4-panel: #07101d;
    --tna-v4-panel-2: #0b1727;
    --tna-v4-line: rgba(163, 197, 224, .16);
    --tna-v4-text: #f7fbff;
    --tna-v4-muted: #a9b8ca;
    --tna-v4-cyan: #69dcff;
    --tna-v4-gold: #efbd62;
}

html.tna-mobile-core-v4,
html.tna-mobile-core-v4 body { max-width: 100%; }
html.tna-mobile-menu-open,
body.tna-mobile-menu-open { overflow: hidden !important; overscroll-behavior: none; }

/* Keep decorative layers behind interaction. */
.tna-cinematic-stage,
.tna-cinematic-stage *,
.tna-space,
.tna-space *,
.tna-network-canvas { pointer-events: none !important; }
.tna-site-header { z-index: 1900 !important; isolation: isolate !important; }
.tna-site-menu-button { position: relative; z-index: 30 !important; }
.tna-site-drawer { z-index: 20 !important; }
.tna-menu-backdrop { z-index: 10 !important; }


/* Menu layering contract: backdrop and drawer share the header stacking context. */
@media (max-width: 1199px) {
    .tna-site-header.tna-menu-layer-root,
    .tna-site-header { overflow: visible !important; }
    body.tna-mobile-menu-open .tna-site-header { pointer-events: auto !important; }
}

/* One deterministic drawer. */
@media (max-width: 1199px) {
    html, body { overflow-x: clip; }
    .tna-container, .tna-shell {
        width: min(100% - (var(--tna-v4-gutter) * 2), 100%) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }
    .tna-site-header {
        top: 0 !important;
        padding-top: var(--tna-v4-safe-top);
        background: rgba(2, 6, 14, .96) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .tna-site-nav {
        min-height: 68px !important;
        display: flex !important;
        gap: 10px !important;
        padding: 8px calc(10px + var(--tna-v4-safe-right)) 8px calc(10px + var(--tna-v4-safe-left)) !important;
        border-radius: 0 0 22px 22px !important;
        background: var(--tna-v4-panel) !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
        backdrop-filter: none !important;
    }
    .tna-site-brand { min-width: 0 !important; flex: 1 1 auto !important; gap: 9px !important; }
    .tna-site-brand__mark { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
    .tna-site-brand__copy { min-width: 0 !important; }
    .tna-site-brand__copy strong,
    .tna-site-brand__copy small,
    .tna-site-brand__context {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .tna-site-brand__copy strong { font-size: .86rem !important; }
    .tna-site-brand__copy small { font-size: .68rem !important; }
    .tna-site-brand__context { display: none !important; }
    .tna-site-desktop-nav,
    .tna-site-actions { display: none !important; }
    .tna-site-menu-button {
        order: -1 !important;
        flex: 0 0 auto !important;
        margin-inline: 0 !important;
        display: inline-flex !important;
        min-width: 50px !important;
        min-height: 50px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 1px solid var(--tna-v4-line) !important;
        border-radius: 16px !important;
        padding: 0 12px !important;
        color: var(--tna-v4-text) !important;
        background: var(--tna-v4-panel-2) !important;
        box-shadow: none !important;
    }
    .tna-site-menu-button b { display: none !important; }
    .tna-site-menu-button > span { width: 22px !important; display: grid !important; gap: 4px !important; }
    .tna-site-menu-button i { width: 22px !important; height: 2px !important; display: block !important; border-radius: 99px !important; background: currentColor !important; transition: transform .18s ease, opacity .18s ease !important; }
    .tna-site-menu-button.is-open i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .tna-site-menu-button.is-open i:nth-child(2) { opacity: 0; }
    .tna-site-menu-button.is-open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .tna-site-drawer {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: min(88vw, 380px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        padding: calc(18px + var(--tna-v4-safe-top)) calc(16px + var(--tna-v4-safe-right)) calc(20px + var(--tna-v4-safe-bottom)) calc(16px + var(--tna-v4-safe-left)) !important;
        border: 0 !important;
        border-inline-start: 1px solid var(--tna-v4-line) !important;
        border-radius: 0 !important;
        color: var(--tna-v4-text) !important;
        background: #06101d !important;
        box-shadow: -18px 0 60px rgba(0,0,0,.48) !important;
        transform: translateX(105%) !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .2s ease, visibility 0s linear .2s !important;
        isolation: isolate !important;
        backdrop-filter: none !important;
    }
    html[dir="ltr"] .tna-site-drawer { transform: translateX(-105%) !important; }
    html[dir="rtl"] .tna-site-drawer.is-open,
    html[dir="ltr"] .tna-site-drawer.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: transform .2s ease !important;
    }
    .tna-site-drawer__head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
    .tna-site-drawer__head button { min-width: 46px !important; min-height: 46px !important; border-radius: 14px !important; }
    .tna-site-drawer__nav,
    .tna-site-drawer__ecosystem,
    .tna-site-drawer__actions { display: grid !important; gap: 8px !important; }
    .tna-site-drawer a,
    .tna-site-drawer button {
        min-height: 48px !important;
        border: 1px solid var(--tna-v4-line) !important;
        border-radius: 15px !important;
        padding: 11px 13px !important;
        color: var(--tna-v4-text) !important;
        background: rgba(255,255,255,.035) !important;
        box-shadow: none !important;
    }
    .tna-site-drawer__ecosystem { grid-template-columns: 1fr !important; }
    .tna-site-drawer__ecosystem a { display: grid !important; gap: 2px !important; }
    .tna-site-drawer__ecosystem small { color: var(--tna-v4-muted) !important; }
    .tna-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        background: rgba(0, 4, 10, .62) !important;
        backdrop-filter: none !important;
        transition: opacity .18s ease, visibility 0s linear .18s !important;
    }
    body.tna-mobile-menu-open .tna-menu-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity .18s ease !important;
    }
}

/* Low-power mobile visual mode: no continuous GPU work. */
@media (max-width: 1199px), (hover: none), (pointer: coarse) {
    .tna-network-canvas,
    .tna-cursor-glow,
    .tna-cinematic-stage,
    .tna-scroll-progress,
    .tnx-home-story__visual { display: none !important; }
    .tna-space__stars,
    .tna-space__dust,
    .tna-space__scan,
    .tna-space__circuit,
    .tna-space__constellation,
    .tna-space__orb,
    .tna-site-brand-mark::after,
    [data-tna-reveal] {
        animation: none !important;
        transform: none !important;
    }
    .tna-space { opacity: .22 !important; }
    .tna-space__grid { opacity: .14 !important; }
    .tnx-home,
    .tna-auth-stage { background-attachment: scroll !important; }
    .tnx-home [style*="backdrop-filter"],
    .tna-card,
    .tna-auth-art,
    .tna-auth-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* Public auth/login — compact, stable and readable. */
.tna-auth-stage { min-height: auto !important; overflow: clip !important; }
.tna-auth-grid { max-width: 1060px !important; }
.tna-auth-art h1 { font-size: clamp(2rem, 4vw, 4rem) !important; overflow-wrap: anywhere; }
.tna-auth-panel, .tna-auth-card { min-width: 0 !important; }
.tna-auth-card { isolation: isolate; }
.tna-auth-card__halo { z-index: -1 !important; }
.tna-auth-form input,
.tna-auth-form select,
.tna-auth-form textarea { max-width: 100% !important; }

@media (max-width: 900px) {
    .tna-auth-stage { padding: 22px 0 42px !important; }
    .tna-auth-grid { width: min(100% - 28px, 560px) !important; grid-template-columns: 1fr !important; gap: 0 !important; }
    .tna-auth-art { display: none !important; }
    .tna-auth-panel { width: 100% !important; }
    .tna-auth-card {
        width: 100% !important;
        padding: clamp(18px, 5vw, 26px) !important;
        border-radius: 24px !important;
        background: var(--tna-v4-panel) !important;
        box-shadow: 0 18px 48px rgba(0,0,0,.32) !important;
        backdrop-filter: none !important;
    }
    .tna-auth-card__head { align-items: flex-start !important; flex-direction: column !important; }
    .tna-auth-tabs { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .tna-auth-row { align-items: stretch !important; flex-direction: column !important; }
    .tna-auth-row > * { width: 100% !important; }
    .tna-auth-submit, .tna-auth-secondary { min-height: 52px !important; }
}

/* Seven-node corporate ecosystem orbit. */
.tnx-ecosystem-scene { min-height: 560px !important; position: relative !important; }
.tnx-service-node--consult { top: 4% !important; inset-inline-start: 4% !important; }
.tnx-service-node--learn { top: 4% !important; inset-inline-end: 4% !important; }
.tnx-service-node--build { top: 39% !important; inset-inline-start: 0 !important; }
.tnx-service-node--patent { top: 39% !important; inset-inline-end: 0 !important; }
.tnx-service-node--publish { bottom: 5% !important; inset-inline-start: 5% !important; }
.tnx-service-node--mart { bottom: 5% !important; inset-inline-end: 5% !important; }
.tnx-service-node--compete { bottom: -2% !important; inset-inline-start: 50% !important; transform: translateX(-50%) !important; }
html[dir="rtl"] .tnx-service-node--compete { transform: translateX(50%) !important; }

@media (max-width: 1199px) {
    .tnx-home-hero__grid { grid-template-columns: 1fr !important; gap: 28px !important; }
    .tnx-home-hero__copy h1 { font-size: clamp(2.1rem, 10vw, 4rem) !important; overflow-wrap: anywhere; }
    .tnx-ecosystem-scene {
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    .tnx-ecosystem-scene__core { grid-column: 1 / -1 !important; position: relative !important; inset: auto !important; transform: none !important; min-height: 116px !important; }
    .tnx-service-node {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 104px !important;
        display: grid !important;
        align-content: center !important;
        gap: 4px !important;
        padding: 14px !important;
        border-radius: 18px !important;
        background: var(--tna-v4-panel) !important;
        box-shadow: none !important;
        animation: none !important;
    }
}
@media (max-width: 430px) {
    .tnx-ecosystem-scene { grid-template-columns: 1fr !important; }
    .tnx-ecosystem-scene__core { grid-column: auto !important; }
}

/* Verified key partners. */
.tna-partners { overflow: hidden; }
.tna-partners__head { max-width: 760px; margin-bottom: 24px; }
.tna-partners__head span { color: var(--tna-v4-gold); font-weight: 900; }
.tna-partners__head h2 { margin: 8px 0; }
.tna-partners__head p { margin: 0; color: var(--tna-muted); line-height: 1.9; }
.tna-partners__viewport { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tna-partners__track { width: max-content; display: flex; gap: 12px; animation: tna-partners-move 34s linear infinite; }
.tna-partners__group { display: flex; gap: 12px; }
.tna-partner-card {
    width: 220px;
    min-height: 138px;
    display: grid;
    grid-template-rows: 66px auto;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--tna-v4-line);
    border-radius: 22px;
    padding: 16px;
    background: rgba(8, 16, 29, .84);
    color: var(--tna-v4-text);
}
.tna-partner-card img { width: 100%; height: 58px; object-fit: contain; filter: grayscale(.12); }
.tna-partner-card strong { display: block; font-size: .94rem; }
.tna-partner-card small { display: block; margin-top: 3px; color: var(--tna-v4-muted); line-height: 1.5; }
.tna-partners__viewport:hover .tna-partners__track { animation-play-state: paused; }
@keyframes tna-partners-move { to { transform: translateX(calc(-50% - 6px)); } }
html[dir="rtl"] .tna-partners__track { animation-direction: reverse; }

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
    .tna-partners__viewport { overflow-x: auto; mask-image: none; scrollbar-width: thin; }
    .tna-partners__track { animation: none !important; width: max-content; }
    .tna-partners__group[aria-hidden="true"] { display: none; }
    .tna-partner-card { width: min(76vw, 250px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .tna-site-drawer, .tna-menu-backdrop { transition-duration: .01ms !important; }
}