/**
 * MilitarySci — Homepage Layer v5.0
 * Command hero, intelligence overview, featured exhibition, systems grid,
 * industry band, ecosystem chain, verified feed, explore paths.
 */

/* ============================================================
   1. COMMAND HERO
   ============================================================ */
.home-hero {
        position: relative;
        overflow: hidden;
        border-block-end: 1px solid var(--ms-color-border);
        padding-block: var(--ms-space-11) var(--ms-space-10);
        background:
                radial-gradient(85% 110% at 82% 8%, rgba(255, 106, 43, .09), transparent 52%),
                radial-gradient(70% 90% at 8% 90%, rgba(92, 145, 201, .08), transparent 55%),
                var(--ms-color-bg);
}
[data-theme="light"] .home-hero {
        background:
                radial-gradient(85% 110% at 82% 8%, rgba(232, 80, 10, .07), transparent 52%),
                radial-gradient(70% 90% at 8% 90%, rgba(47, 110, 168, .07), transparent 55%),
                var(--ms-color-bg);
}
.home-hero__inner {
        position: relative;
        display: grid;
        justify-items: start;
        gap: var(--ms-space-5);
}
.home-hero__glow {
        position: absolute;
        inset-block-start: -40%;
        inset-inline-end: -10%;
        inline-size: 46vw;
        block-size: 46vw;
        background: radial-gradient(circle, var(--ms-atmo-glow), transparent 62%);
        filter: blur(30px);
        pointer-events: none;
}
.home-hero__signal {
        display: inline-flex;
        align-items: center;
        gap: var(--ms-space-3);
        padding: 7px 16px;
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-pill);
        background: color-mix(in srgb, var(--ms-color-surface) 62%, transparent);
        backdrop-filter: blur(8px);
}
.home-hero__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-hero);
        font-weight: 700;
        line-height: 1.12;
        max-inline-size: 18ch;
}
.home-hero__title-accent {
        display: block;
        color: var(--ms-color-accent);
        background: linear-gradient(105deg, var(--ms-color-accent), var(--ms-color-accent-hover) 55%, var(--ms-color-amber));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}
.home-hero__desc {
        color: var(--ms-color-text-secondary);
        font-size: calc(var(--ms-fs-body) * 1.12);
        max-inline-size: 62ch;
}
.home-hero__paths {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-2);
}
.home-hero__path {
        padding: 6px 14px;
        border-radius: var(--ms-radius-pill);
        border: 1px solid transparent;
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
        transition: all var(--ms-dur-fast) var(--ms-ease-out);
}
.home-hero__path:hover {
        color: var(--ms-color-accent);
        border-color: var(--ms-color-accent-line);
        background: var(--ms-color-accent-softer);
}

/* Command search */
.home-command {
        display: flex;
        gap: var(--ms-space-2);
        inline-size: min(680px, 100%);
        margin-block-start: var(--ms-space-2);
}
.home-command__field {
        position: relative;
        flex: 1;
        display: flex;
        align-items: center;
}
.home-command__field > svg {
        position: absolute;
        inset-inline-start: 16px;
        inline-size: 18px;
        block-size: 18px;
        color: var(--ms-color-accent);
        pointer-events: none;
}
.home-command__input {
        inline-size: 100%;
        padding: 15px 48px;
        border-radius: var(--ms-radius-lg);
        border: 1px solid var(--ms-color-border-strong);
        background: color-mix(in srgb, var(--ms-color-surface) 80%, transparent);
        backdrop-filter: blur(10px);
        font-size: calc(var(--ms-fs-body) * 1.05);
        color: var(--ms-color-text);
        box-shadow: var(--ms-shadow-2);
        transition: all var(--ms-dur-base) var(--ms-ease-out);
}
.home-command__input::placeholder { color: var(--ms-color-text-quaternary); }
.home-command__input:focus {
        border-color: var(--ms-color-accent);
        box-shadow: 0 0 0 4px var(--ms-color-accent-softer), var(--ms-shadow-2);
}
.home-command__kbd {
        position: absolute;
        inset-inline-end: 14px;
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xs);
        padding: 3px 7px;
        background: var(--ms-color-bg-deep);
}
.home-command__submit { padding-inline: 26px; }

/* ============================================================
   2. INTELLIGENCE OVERVIEW
   ============================================================ */
.home-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--ms-space-3);
}
.home-overview__cell,
.home-overview__total {
        position: relative;
        display: grid;
        gap: 6px;
        align-content: start;
        justify-items: start;
        padding: var(--ms-space-5);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
        transition:
                border-color var(--ms-dur-base) var(--ms-ease-out),
                transform var(--ms-dur-base) var(--ms-ease-out);
}
.home-overview__cell::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: 2px;
        background: var(--cell-accent, var(--ms-color-accent));
        opacity: .85;
}
.home-overview__cell:hover {
        border-color: color-mix(in srgb, var(--cell-accent, var(--ms-color-accent)) 45%, transparent);
        transform: translateY(-2px);
}
.home-overview__icon {
        inline-size: 30px;
        block-size: 30px;
        display: grid;
        place-items: center;
        border-radius: var(--ms-radius-md);
        color: var(--cell-accent, var(--ms-color-accent));
        background: color-mix(in srgb, var(--cell-accent, var(--ms-color-accent)) 12%, transparent);
}
.home-overview__icon svg { inline-size: 16px; block-size: 16px; }
.home-overview__value {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h2);
        font-weight: 700;
        line-height: 1;
        color: var(--ms-color-text);
        font-variant-numeric: tabular-nums;
        direction: ltr;
        unicode-bidi: embed;
}
.home-overview__label {
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
}
.home-overview__total {
        border-style: dashed;
        background: transparent;
        justify-content: center;
        align-content: center;
        justify-items: center;
        text-align: center;
        min-inline-size: 170px;
}
.home-overview__total .home-overview__value { color: var(--ms-color-accent); }

/* ============================================================
   3. FEATURED EXHIBITION
   ============================================================ */
.home-featured {
        padding-block: var(--ms-space-9);
}
.home-feat {
        position: relative;
        border: 1px solid var(--ms-color-border-strong);
        border-radius: var(--ms-radius-xl);
        overflow: hidden;
        box-shadow: var(--ms-shadow-3);
        background: var(--ms-color-bg-secondary);
        min-block-size: 420px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
}
.home-feat__media {
        position: absolute;
        inset: 0;
        z-index: 0;
}
.home-feat__media img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transform: scale(1.0);
        transition: transform 6s var(--ms-ease-out);
}
.home-feat:hover .home-feat__media img { transform: scale(1.035); }
.home-feat__scrim {
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
                linear-gradient(to top, var(--ms-color-bg) 12%, color-mix(in srgb, var(--ms-color-bg) 68%, transparent) 48%, color-mix(in srgb, var(--ms-color-bg) 22%, transparent) 100%);
}
.home-feat__body {
        position: relative;
        z-index: 2;
        padding: var(--ms-space-7);
        display: grid;
        justify-items: start;
        gap: var(--ms-space-4);
        max-inline-size: 780px;
}
.home-feat__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-display);
        font-weight: 700;
        line-height: 1.1;
}
.home-feat__title a { transition: color var(--ms-dur-fast) var(--ms-ease-out); }
.home-feat__title a:hover { color: var(--ms-color-accent); }
.home-feat__excerpt {
        color: var(--ms-color-text-secondary);
        max-inline-size: 62ch;
}
.home-feat__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ms-space-5);
}
.home-feat__metaitem {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text-secondary);
}
.home-feat__metaitem svg { inline-size: 15px; block-size: 15px; color: var(--ms-color-accent); }
.home-feat__actions {
        display: flex;
        gap: var(--ms-space-3);
        flex-wrap: wrap;
}
.home-feat__more {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1px;
        background: var(--ms-color-border);
        border-block-start: 1px solid var(--ms-color-border);
}
.home-feat__moreitem {
        display: flex;
        align-items: baseline;
        gap: var(--ms-space-3);
        padding: var(--ms-space-4) var(--ms-space-6);
        background: color-mix(in srgb, var(--ms-color-surface) 86%, transparent);
        backdrop-filter: blur(8px);
        transition: background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.home-feat__moreitem:hover { background: var(--ms-color-surface-hi); }
.home-feat__moreyear {
        font-family: var(--ms-font-mono);
        font-weight: 700;
        color: var(--ms-color-accent);
}
.home-feat__moretitle { font-weight: 600; font-size: var(--ms-fs-small); color: var(--ms-color-text); }
.home-feat__moremeta {
        margin-inline-start: auto;
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
}

/* ============================================================
   4. FEATURED SYSTEMS
   ============================================================ */
.home-systems {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 240px;
        gap: var(--ms-space-4);
}
.home-system {
        position: relative;
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
        border: 1px solid var(--ms-color-border);
        background: var(--ms-color-surface);
        transition: border-color var(--ms-dur-base) var(--ms-ease-out), transform var(--ms-dur-base) var(--ms-ease-out);
}
.home-system:hover {
        border-color: var(--ms-color-border-strong);
        transform: translateY(-3px);
}
.home-system--lead {
        grid-column: span 2;
        grid-row: span 2;
}
.home-system__media {
        position: absolute;
        inset: 0;
        background:
                linear-gradient(var(--ms-atmo-grid) 1px, transparent 1px),
                linear-gradient(90deg, var(--ms-atmo-grid) 1px, transparent 1px),
                var(--ms-color-bg-deep);
        background-size: 26px 26px, 26px 26px, auto;
}
.home-system__media img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform var(--ms-dur-slower) var(--ms-ease-swing);
}
.home-system:hover .home-system__media img { transform: scale(1.05); }
.home-system::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 11, 14, .88) 0%, rgba(10, 11, 14, .30) 46%, transparent 70%);
}
[data-theme="light"] .home-system::after {
        background: linear-gradient(to top, rgba(14, 16, 20, .78) 0%, rgba(14, 16, 20, .22) 46%, transparent 70%);
}
.home-system__body {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 2;
        display: grid;
        gap: 4px;
        padding: var(--ms-space-5);
}
.home-system__family {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-accent);
        text-transform: uppercase;
}
.home-system__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-h3);
        font-weight: 600;
        color: #fff;
        line-height: var(--ms-lh-tight);
}
[data-theme="light"] .home-system__title { color: #fff; }
.home-system--lead .home-system__title { font-size: var(--ms-fs-h2); }
.home-system__mfr {
        font-size: var(--ms-fs-micro);
        color: rgba(255, 255, 255, .62);
}

/* ============================================================
   6. COMPANIES & INDUSTRY BAND
   ============================================================ */
.home-industry {
        margin-block-start: var(--ms-space-9);
        padding-block: var(--ms-space-8);
        background:
                linear-gradient(var(--ms-color-bg-secondary), transparent);
        border-block: 1px solid var(--ms-color-hairline);
}
.home-industry__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 1px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
}
.home-industry__cell {
        background: var(--ms-color-surface);
        padding: var(--ms-space-4) var(--ms-space-5);
        display: grid;
        gap: 5px;
        transition: background-color var(--ms-dur-fast) var(--ms-ease-out);
        position: relative;
}
.home-industry__cell::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block: 0;
        inline-size: 2px;
        background: var(--ms-color-teal);
        opacity: 0;
        transition: opacity var(--ms-dur-fast) var(--ms-ease-out);
}
.home-industry__cell:hover { background: var(--ms-color-surface-hi); }
.home-industry__cell:hover::after { opacity: 1; }
.home-industry__name {
        font-size: var(--ms-fs-small);
        font-weight: 600;
        color: var(--ms-color-text);
}
.home-industry__meta {
        display: flex;
        gap: var(--ms-space-3);
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
}

/* ============================================================
   7. GLOBAL ECOSYSTEM CHAIN
   ============================================================ */
.home-eco {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--ms-space-2);
        padding: var(--ms-space-6);
        background:
                linear-gradient(var(--ms-atmo-grid) 1px, transparent 1px) 0 0 / 30px 30px,
                var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-xl);
}
.home-eco__node {
        flex: 1 1 180px;
        display: grid;
        gap: 4px;
        align-content: center;
        padding: var(--ms-space-4) var(--ms-space-5);
        background: var(--ms-color-bg-deep);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        transition: all var(--ms-dur-fast) var(--ms-ease-out);
        min-inline-size: 0;
}
.home-eco__node:hover {
        border-color: var(--ms-color-accent-line);
        background: var(--ms-color-accent-softer);
        transform: translateY(-2px);
}
.home-eco__rel {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-cobalt);
        direction: ltr;
        unicode-bidi: embed;
}
.home-eco__node--company .home-eco__rel { color: var(--ms-color-teal); }
.home-eco__node--product .home-eco__rel { color: var(--ms-color-accent); }
.home-eco__node--exhibition_edition .home-eco__rel,
.home-eco__node--exhibition_series .home-eco__rel { color: var(--ms-color-amber); }
.home-eco__name {
        font-weight: 600;
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text);
        overflow-wrap: anywhere;
}
.home-eco__link {
        align-self: center;
        color: var(--ms-color-text-quaternary);
        flex-shrink: 0;
}
.home-eco__link svg { inline-size: 18px; block-size: 18px; }

/* ============================================================
   8. VERIFIED FEED
   ============================================================ */
.home-verified {
        display: grid;
        gap: var(--ms-space-2);
}
.home-verified__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ms-space-5);
        padding: var(--ms-space-3) var(--ms-space-4);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-md);
        transition: border-color var(--ms-dur-fast) var(--ms-ease-out);
}
.home-verified__row:hover { border-color: var(--ms-color-border-strong); }
.home-verified__main {
        display: flex;
        align-items: center;
        gap: var(--ms-space-3);
        min-inline-size: 0;
        flex: 1;
}
.home-verified__title {
        font-size: var(--ms-fs-small);
        font-weight: 600;
        color: var(--ms-color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}
.home-verified__title:hover { color: var(--ms-color-accent); }
.home-verified__trust {
        display: flex;
        align-items: center;
        gap: var(--ms-space-4);
        flex-shrink: 0;
}
.home-verified__time {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-quaternary);
}

/* ============================================================
   9. EXPLORE
   ============================================================ */
.home-explore {
        padding-block: var(--ms-space-9) var(--ms-space-8);
}
.home-explore__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--ms-space-3);
}
.home-explore__cell {
        display: grid;
        gap: 6px;
        align-content: start;
        padding: var(--ms-space-5);
        background: var(--ms-color-surface);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        transition: all var(--ms-dur-fast) var(--ms-ease-out);
}
.home-explore__cell:hover {
        border-color: var(--ms-color-accent-line);
        background: var(--ms-color-accent-softer);
        transform: translateY(-2px);
}
.home-explore__icon {
        color: var(--ms-color-accent);
}
.home-explore__icon svg { inline-size: 20px; block-size: 20px; }
.home-explore__label {
        font-weight: 700;
        font-size: var(--ms-fs-body);
        color: var(--ms-color-text);
}
.home-explore__desc {
        font-size: var(--ms-fs-tiny);
        color: var(--ms-color-text-tertiary);
        line-height: 1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
        .home-hero { padding-block: var(--ms-space-9) var(--ms-space-8); }
        .home-command { flex-direction: column; }
        .home-command__submit { inline-size: 100%; }
        .home-systems { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
        .home-feat__body { padding: var(--ms-space-5); }
        .home-feat { min-block-size: 340px; }
        .home-feat__more { grid-template-columns: 1fr; }
        .home-overview { grid-template-columns: repeat(2, 1fr); }
        .home-overview__total { grid-column: 1 / -1; min-inline-size: 0; }
        .home-eco { padding: var(--ms-space-4); }
        .home-eco__node { flex-basis: 100%; }
        .home-eco__link { display: none; }
        .home-verified__row { flex-direction: column; align-items: flex-start; gap: var(--ms-space-2); }
}
@media (max-width: 640px) {
        .home-hero__title { font-size: clamp(2rem, 8vw, 2.6rem); }
        .home-systems { grid-template-columns: 1fr; grid-auto-rows: 220px; }
        .home-system--lead { grid-column: span 1; grid-row: span 1; }
}