/* =========================================================
   首页正文样式目录（Ctrl+F 搜「模块」或中文名）
   ---------------------------------------------------------
   模块 00  基础变量 / 通用版式     .page .container .section-title
   模块 01  原首屏 Hero（已不用）   .hero          → 现用 home-hero-banner.css
   模块 02  原首屏工业场景（已不用）.hero-scene
   模块 03  系统架构四路线图        .system-flow   （图：architecture-four-routes）
   模块 04  产品平台三卡片          .platform-grid / .platform-card
   模块 04b 分布式产品条           .distributed / .dist-item
   模块 05  配置选型               .config-grid
   模块 06  安全暗色面板           .dark-panel / .safety- / .response-
   模块 07  证据链 1→9             .evidence-flow / .evidence-step
   模块 08  数字化仿真             .digital-section / .digital-
   模块 08b 制造链路               .manufacturing-
   模块 09  示范项目 / 应用场景    .project-case / .application-
   模块 10  运维闭环 7 步          .ops / .ops-card / .ops-timeline
   模块 11  通用悬停
   ---------------------------------------------------------
   首屏三屏另见：
     public/assets/home/home-hero-banner.css     Banner 轮播
     public/assets/home/home-screens-2-3.css     工程学科 / 规模全景
   ========================================================= */

/* =========================================================
   【模块 00】基础变量 / 通用版式
   搜索：.page  .container  .section-title  .panel  .badge
   Brand aliases → src/styles/site.css (--site-color-*)
   ========================================================= */

:root{
    --page:1920px;
    --content:85%;

    --font:
        "PingFang SC",
        "Microsoft YaHei",
        "Noto Sans SC",
        Arial,
        sans-serif;

    --navy-1000:color-mix(in srgb, var(--site-color-navy) 92%, black);
    --navy-950:color-mix(in srgb, var(--site-color-navy) 88%, black);
    --navy-900:var(--site-color-navy-strong);
    --navy-850:var(--site-color-navy);
    --navy-800:color-mix(in srgb, var(--site-color-navy) 78%, var(--site-color-blue));

    --blue:var(--site-color-blue);
    --blue-2:color-mix(in srgb, var(--site-color-blue) 62%, white);
    --blue-3:color-mix(in srgb, var(--site-color-blue) 42%, white);
    --blue-soft:color-mix(in srgb, var(--site-color-blue) 8%, white);

    --cyan:hsl(192 76% 56%);

    --green:hsl(152 61% 37%);
    --green-2:hsl(152 55% 53%);
    --green-soft:hsl(152 50% 95%);

    --orange:hsl(27 100% 54%);
    --yellow:hsl(42 84% 58%);

    --red:hsl(0 74% 62%);
    --purple:hsl(252 55% 62%);

    --title:var(--site-color-navy);
    --text:var(--site-color-text);
    --text-2:var(--site-color-muted);
    --muted:var(--site-color-muted);

    --dark-title:var(--color-text-inverse);
    --dark-text:color-mix(in srgb, white 92%, var(--site-color-blue));
    --dark-muted:var(--color-text-inverse-secondary);

    --bg:var(--site-color-surface-soft);
    --panel:var(--site-color-surface);

    --line:var(--site-color-line);
    --line-2:color-mix(in srgb, var(--site-color-line) 50%, white);

    --radius:12px;

    --shadow:
        0 8px 24px rgba(38,80,122,.06),
        0 1px 3px rgba(18,58,97,.04);
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    min-width:0;

    color:var(--text);
    background:var(--bg);

    font-family:var(--font);
    font-size:16px;
    line-height:1.65;
}

button{
    font:inherit;
    cursor:pointer;
}

.page{
    width:100%;
    max-width:1920px;
    margin:0 auto;

    overflow:hidden;

    background:var(--bg);
}

.container{
    width:85%;
    margin:0 auto;
}

main{
    padding:16px 0 44px;
}

.section{
    margin-top:14px;
}

.panel{
    padding:18px;

    border:1px solid var(--line);
    border-radius:var(--radius);

    background:var(--panel);

    box-shadow:var(--shadow);
}

.section-title{
    display:flex;
    align-items:center;
    gap:10px;

    margin:0 0 16px;

    color:var(--title);

    font-size:25px;
    line-height:1.35;
    font-weight:900;
}

.section-title::before{
    content:"";

    width:5px;
    height:28px;

    flex:0 0 5px;

    border-radius:5px;

    background:var(--blue);
}

.section-title small{
    color:var(--muted);

    font-size:14px;
    font-weight:500;
}

.good{
    color:var(--green)!important;
}

.warn{
    color:var(--orange)!important;
}

.danger{
    color:var(--red)!important;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:4px 9px;

    border-radius:5px;

    font-size:13px;
    font-weight:900;
}

.badge-green{
    color:var(--green);
    background:var(--line);
}

.badge-blue{
    color:var(--blue);
    background:var(--blue-soft);
}

.badge-orange{
    color:var(--red);
    background:var(--blue-soft);
}

canvas{
    display:block;
    width:100%;
    height:100%;
}


/* =========================================================
   【模块 01】原首屏 Hero（当前首页已替换，一般不用改）
   搜索：.hero  .btn-primary
   现用首屏 → home-hero-banner.css
   ========================================================= */

.hero{
    position:relative;

    min-height:680px;

    overflow:hidden;

    color:var(--panel);

    background:
        radial-gradient(
            circle at 68% 28%,
            rgba(71,145,202,.25),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            var(--title) 0%,
            var(--text) 42%,
            var(--muted) 100%
        );
}

.hero::after{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(2,18,37,.70),
            rgba(2,18,37,.30) 47%,
            rgba(2,18,37,.10)
        );
}

.hero-inner{
    position:relative;
    z-index:3;

    min-height:680px;

    display:grid;
    grid-template-columns:650px 1fr;
    gap:30px;
    align-items:center;
}

.hero-copy{
    position:relative;
    z-index:20;
}

.hero-kicker{
    margin-bottom:10px;

    color:var(--line);

    font-size:15px;
    font-weight:800;
}

.hero h1{
    margin:0 0 18px;

    color:var(--panel);

    font-size:48px;
    line-height:1.18;
    font-weight:900;
    letter-spacing:-1px;
}

.hero-copy>p{
    max-width:610px;

    margin:0;

    color:var(--line);

    font-size:16px;
    line-height:1.85;
}

.hero-tags{
    display:flex;
    gap:9px;
    flex-wrap:wrap;

    margin-top:16px;
}

.hero-tag{
    padding:6px 11px;

    border:1px solid rgba(255,255,255,.23);
    border-radius:20px;

    color:var(--line);
    background:rgba(255,255,255,.07);

    font-size:13px;
}

.hero-actions{
    display:flex;
    gap:13px;

    margin-top:22px;
}

.btn{
    min-width:180px;

    padding:11px 20px;

    border-radius:6px;

    font-size:14px;
    font-weight:800;
}

.btn-primary{
    border:1px solid var(--blue);

    color:var(--panel);
    background:var(--blue);
}

.btn-light{
    border:1px solid rgba(255,255,255,.60);

    color:var(--title);
    background:var(--panel);
}


/* =========================================================
   【模块 02】原首屏工业场景（当前首页已不用）
   搜索：.hero-scene  .hero-cab  .hero-bess  .engineer
   ========================================================= */

.hero-scene{
    position:relative;

    height:630px;
}

.hero-sky{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            transparent 0 42%,
            rgba(38,62,75,.08) 42% 100%
        );
}


/* transmission towers */

.tower{
    position:absolute;

    width:8px;
    height:230px;

    bottom:170px;

    background:var(--muted);
}

.tower::before,
.tower::after{
    content:"";

    position:absolute;

    left:50%;

    width:150px;
    height:3px;

    transform:translateX(-50%);

    background:var(--muted);
}

.tower::before{
    top:55px;
}

.tower::after{
    top:105px;
}

.tower-a{
    left:170px;
}

.tower-b{
    right:20px;

    height:270px;
}


/* ground */

.hero-ground{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:230px;

    background:
        linear-gradient(
            var(--muted),
            var(--text)
        );
}


/* cabinet row */

.hero-row{
    position:absolute;

    left:20px;
    right:210px;
    bottom:95px;

    display:flex;
    gap:9px;
    align-items:flex-end;
}

.hero-cab{
    position:relative;

    width:95px;
    height:var(--h);

    border:3px solid var(--muted);

    background:
        linear-gradient(
            var(--line),
            var(--dark-muted)
        );

    box-shadow:
        5px 10px 14px rgba(0,0,0,.18);
}

.hero-cab::before{
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    top:22px;

    height:70px;

    background:
        repeating-linear-gradient(
            0deg,
            var(--muted) 0 3px,
            var(--dark-muted) 4px 9px
        );
}


/* main open BESS */

.hero-bess{
    position:absolute;

    right:35px;
    bottom:40px;

    width:290px;
    height:510px;

    border:5px solid var(--line);

    background:
        linear-gradient(
            90deg,
            var(--line-2) 0 11%,
            var(--title) 11% 89%,
            var(--line-2) 89%
        );

    box-shadow:
        13px 22px 34px rgba(0,0,0,.28);
}

.hero-bess::before{
    content:"";

    position:absolute;

    left:40px;
    right:40px;
    top:32px;
    bottom:32px;

    background:
        repeating-linear-gradient(
            0deg,
            var(--title) 0 27px,
            var(--muted) 28px 32px
        );
}

.hero-bess::after{
    content:"";

    position:absolute;

    right:48px;
    top:40px;
    bottom:40px;

    width:6px;

    background:
        repeating-linear-gradient(
            0deg,
            var(--orange) 0 11px,
            transparent 12px 23px
        );
}


/* engineer */

.engineer{
    position:absolute;

    right:330px;
    bottom:60px;

    width:24px;
    height:110px;

    border-radius:7px;

    background:var(--title);
}

.engineer::before{
    content:"";

    position:absolute;

    left:2px;
    top:-19px;

    width:19px;
    height:19px;

    border-radius:50%;

    background:var(--red);
}

.engineer::after{
    content:"";

    position:absolute;

    left:-3px;
    top:-23px;

    width:30px;
    height:10px;

    border-radius:13px 13px 3px 3px;

    background:var(--line);
}


/* status card */

.hero-system-card{
    position:absolute;

    z-index:25;

    right:260px;
    bottom:55px;

    width:285px;

    padding:15px;

    border:1px solid rgba(129,180,217,.35);
    border-radius:9px;

    background:
        linear-gradient(
            145deg,
            rgba(4,28,51,.96),
            rgba(7,58,92,.94)
        );

    box-shadow:
        0 15px 25px rgba(1,18,34,.28);
}

.hero-system-card h3{
    margin:0 0 10px;

    color:var(--panel);

    font-size:16px;
}

.system-row{
    display:flex;
    justify-content:space-between;
    gap:10px;

    padding:6px 0;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    color:var(--dark-muted);

    font-size:13px;
}

.system-row strong{
    color:var(--panel);
}


/* =========================================================
   【模块 03】系统架构四路线图
   页面标题附近；主图 class：.system-flow--art / .architecture-flow-art
   搜索：.system-flow  .flow-unit  .supporting-systems  .logic-line
   ========================================================= */

.system-flow{
    position:relative;

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:28px;

    padding:12px 25px 130px;
}

.flow-unit{
    position:relative;

    text-align:center;
}

.flow-unit:not(:last-child)::after{
    content:"→";

    position:absolute;

    right:-25px;
    top:90px;

    color:var(--orange);

    font-size:30px;
    font-weight:900;
}

.flow-unit h3{
    margin:0 0 7px;

    color:var(--title);

    font-size:16px;
}

.flow-unit span{
    color:var(--muted);

    font-size:13px;
}

.equipment{
    position:relative;

    height:185px;

    margin-top:8px;

    border-radius:8px;

    background:var(--line);
}

.eq-battery{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:5px;

    padding:22px;
}

.eq-battery i{
    width:42px;
    height:130px;

    border:2px solid var(--muted);

    background:
        repeating-linear-gradient(
            0deg,
            var(--title) 0 14px,
            var(--muted) 15px 18px
        );
}

.eq-box{
    position:absolute;

    left:50%;
    top:50%;

    width:130px;
    height:115px;

    transform:translate(-50%,-50%);

    border:3px solid var(--muted);

    background:
        linear-gradient(
            var(--line),
            var(--dark-muted)
        );
}

.eq-box::before{
    content:"";

    position:absolute;

    left:18px;
    right:18px;
    top:28px;

    height:45px;

    background:
        repeating-linear-gradient(
            0deg,
            var(--muted) 0 3px,
            var(--dark-muted) 4px 8px
        );
}


/* supporting systems */

.supporting-systems{
    position:absolute;

    left:360px;
    right:360px;
    bottom:10px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.support-unit{
    min-height:95px;

    display:grid;
    grid-template-columns:55px 1fr;
    gap:9px;
    align-items:center;

    padding:10px;

    border:1px solid var(--line);
    border-radius:7px;

    background:var(--panel);
}

.support-unit i{
    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    border-radius:8px;

    color:var(--panel);
    background:var(--c);

    font-style:normal;
    font-weight:900;
}

.support-unit strong{
    display:block;

    color:var(--title);

    font-size:14px;
}

.support-unit span{
    color:var(--muted);

    font-size:13px;
}


/* colored logical lines */

.logic-line{
    position:absolute;

    bottom:102px;

    height:3px;

    border-top:3px dashed var(--c);
}

.ll1{
    left:150px;
    right:150px;

    --c:var(--green);
}

.ll2{
    left:230px;
    right:230px;

    bottom:88px;

    --c:var(--blue);
}

.ll3{
    left:310px;
    right:310px;

    bottom:74px;

    --c:var(--red);
}


/* =========================================================
   【模块 04】产品平台三卡片（工商业 ESS / DC Block / 多模块）
   搜索：.platform-grid  .platform-card  .platform-photo  .platform-copy
   边框覆盖另见 HomePage.astro 内联样式
   ========================================================= */

.platform-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1.2fr;
    gap:10px;
}

.platform-card{
    overflow:hidden;

    border:2px solid transparent;
    border-radius:9px;

    background:var(--panel);

    cursor:pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.platform-card.active{
    transform:translateY(-4px);

    border-color:var(--blue);

    box-shadow:
        0 12px 25px rgba(38,80,122,.11);
}

.platform-photo{
    position:relative;

    height:240px;

    background:var(--bg-photo);
}

.platform-card:nth-child(1){
    --bg-photo:
        linear-gradient(
            145deg,
            var(--muted),
            var(--line) 42%,
            var(--muted)
        );
}

.platform-card:nth-child(2){
    --bg-photo:
        linear-gradient(
            145deg,
            var(--muted),
            var(--line) 44%,
            var(--muted)
        );
}

.platform-card:nth-child(3){
    --bg-photo:
        linear-gradient(
            145deg,
            var(--muted),
            var(--dark-muted) 44%,
            var(--blue)
        );
}

.platform-photo::before{
    content:"";

    position:absolute;

    left:8%;
    right:8%;
    bottom:28px;

    height:120px;

    border:3px solid var(--muted);

    background:
        repeating-linear-gradient(
            90deg,
            var(--line) 0 70px,
            var(--dark-muted) 71px 78px
        );
}

.platform-copy{
    padding:12px;
}

.platform-copy strong{
    display:block;

    color:var(--title);

    font-size:17px;
}

.platform-copy span{
    color:var(--muted);

    font-size:13px;
}

.platform-result{
    margin-top:10px;

    padding:10px;

    border-radius:6px;

    color:var(--title);
    background:var(--blue-soft);

    font-size:14px;
}


/* ---------------------------------------------------------
   【模块 04b】分布式产品条（一体式 / 户用 / 商业 / 微网 / 电网）
   搜索：.distributed  .dist-item  .dist-icon
   --------------------------------------------------------- */

.distributed{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;

    margin-top:12px;
}

.dist-item{
    min-height:125px;

    padding:10px;

    border:1px solid var(--line);
    border-radius:7px;

    background:var(--panel);

    text-align:center;
}

.dist-icon{
    position:relative;

    width:70px;
    height:65px;

    margin:0 auto 6px;
}

.dist-icon::before{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:50px;
    height:45px;

    transform:translate(-50%,-50%);

    border:2px solid var(--muted);

    background:var(--line);
}

.dist-item strong{
    display:block;

    color:var(--title);

    font-size:13px;
}

.dist-item span{
    color:var(--muted);

    font-size:13px;
}


/* =========================================================
   【模块 05】配置选型（参数选项 → 方案预览）
   搜索：.config-grid  .config-card  .config-option  .plan-preview
   ========================================================= */

.config-grid{
    display:grid;
    grid-template-columns:.8fr 1fr .9fr;
    gap:14px;
    align-items:stretch;
}

.config-card{
    padding:14px;

    border:1px solid var(--line);
    border-radius:8px;

    background:var(--panel);
}

.config-card h3{
    margin:0 0 9px;

    color:var(--text);

    font-size:18px;
}

.config-list{
    display:grid;
    gap:7px;
}

.config-row{
    display:flex;
    justify-content:space-between;
    gap:10px;

    padding:7px;

    border-radius:6px;

    color:var(--muted);
    background:var(--panel);

    font-size:13px;
}

.config-row strong{
    color:var(--title);
}

.config-options{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.config-option{
    padding:10px;

    border:2px solid transparent;
    border-radius:7px;

    background:var(--panel);

    cursor:pointer;
}

.config-option.active{
    border-color:var(--blue);
    background:var(--blue-soft);
}

.config-option strong{
    display:block;

    color:var(--title);

    font-size:14px;
}

.config-option span{
    color:var(--muted);

    font-size:13px;
}

.config-arrow{
    display:flex;
    justify-content:center;

    margin:8px 0;

    color:var(--blue);

    font-size:28px;
    font-weight:900;
}

.plan-preview{
    height:135px;

    margin-top:10px;

    border:1px solid var(--line);
    border-radius:7px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--line) 0 52px,
            var(--dark-muted) 53px 58px
        );
}


/* =========================================================
   【模块 06】安全暗色面板（多层防护 + 响应链）
   搜索：.dark-panel  .safety-  .response-chain  .response-step
   ========================================================= */

.dark-panel{
    padding:20px;

    overflow:hidden;

    color:var(--line);

    border:1px solid var(--title);
    border-radius:11px;

    background:
        radial-gradient(
            circle at 62% 40%,
            rgba(32,131,221,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--title),
            var(--title)
        );

    box-shadow:var(--shadow);
}

.dark-title{
    margin:0 0 15px;

    color:var(--panel);

    font-size:25px;
    font-weight:900;
}

.safety-layout{
    display:grid;
    grid-template-columns:570px 1fr;
    gap:18px;
}

.safety-system{
    position:relative;

    min-height:380px;
}

.safety-cab{
    position:absolute;

    left:160px;
    top:25px;

    width:230px;
    height:325px;

    border:4px solid var(--muted);

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.03)
        );
}

.safety-cab::before{
    content:"";

    position:absolute;

    left:45px;
    right:45px;
    top:30px;
    bottom:30px;

    background:
        linear-gradient(
            180deg,
            var(--red) 0%,
            var(--yellow) 25%,
            var(--green) 53%,
            var(--blue-2) 76%,
            var(--blue) 100%
        );

    opacity:.85;
}

.layer-label{
    position:absolute;

    left:0;

    top:var(--t);

    width:150px;

    color:var(--line);

    font-size:13px;
}

.layer-label::after{
    content:"";

    position:absolute;

    left:110px;
    top:11px;

    width:95px;
    height:2px;

    background:var(--muted);
}

.system-owners{
    position:absolute;

    right:0;
    top:45px;

    display:grid;
    gap:8px;

    width:135px;
}

.owner-chip{
    padding:8px;

    border:1px solid rgba(105,174,225,.20);
    border-radius:6px;

    color:var(--line);
    background:rgba(255,255,255,.04);

    font-size:12px;
}


/* —— 模块 06 子块：安全响应链 .response-chain —— */

.response-chain{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:7px;
    align-items:start;
}

.response-step{
    position:relative;

    min-height:210px;

    padding:10px 7px;

    border:1px solid rgba(105,174,225,.20);
    border-radius:8px;

    background:rgba(255,255,255,.035);

    text-align:center;
}

.response-step:not(:last-child)::after{
    content:"→";

    position:absolute;

    right:-12px;
    top:57px;

    color:var(--blue-2);

    font-size:20px;
}

.response-step i{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    margin:0 auto 8px;

    border-radius:50%;

    color:var(--panel);
    background:var(--title);

    font-style:normal;
}

.response-step strong{
    display:block;

    color:var(--panel);

    font-size:13px;
}

.response-step span{
    color:var(--dark-muted);

    font-size:12px;
}

.response-status{
    margin-top:12px;

    display:flex;
    justify-content:center;
    gap:20px;

    color:var(--blue-soft);

    font-size:13px;
}

.response-status i{
    width:10px;
    height:10px;

    display:inline-block;

    margin-right:5px;

    border-radius:50%;

    background:var(--c);
}


/* =========================================================
   【模块 07】证据链（设计→制造→交付→运行）
   搜索：.evidence-header  .evidence-flow  .evidence-step  .evidence-detail
   ========================================================= */

.evidence-header{
    text-align:center;
}

.evidence-header h2{
    margin:0;

    color:var(--title);

    font-size:25px;
}

.evidence-id{
    margin:8px 0 14px;

    color:var(--muted);

    font-size:14px;
}

.evidence-id strong{
    display:inline-block;

    padding:5px 12px;

    border-radius:5px;

    color:var(--title);
    background:var(--blue-soft);
}

.evidence-flow{
    display:grid;
    grid-template-columns:repeat(9,1fr);
    gap:7px;
}

.evidence-step{
    position:relative;

    min-height:170px;

    padding:9px;

    border:1px solid var(--line);
    border-radius:7px;

    background:var(--panel);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    cursor:pointer;
}

.evidence-step:not(:last-child)::after{
    content:"→";

    position:absolute;

    right:-12px;
    top:50%;
    transform:translateY(-50%);

    color:var(--blue-2);

    font-size:20px;
}

.evidence-step.active{
    border-color:var(--blue-2);
    background:var(--blue-soft);
}

.evidence-step i{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    margin:0 auto 7px;

    border-radius:50%;

    color:var(--blue-2);
    background:var(--blue-soft);

    font-style:normal;
}

.evidence-step strong{
    display:block;

    color:var(--title);

    font-size:13px;
}

.evidence-step span{
    color:var(--muted);

    font-size:12px;
}

.evidence-status{
    margin-top:6px;

    color:var(--green);

    font-size:12px;
    font-weight:900;
}

.evidence-detail{
    margin-top:10px;

    padding:9px;

    border-radius:6px;

    color:var(--title);
    background:var(--blue-soft);

    font-size:13px;
}


/* =========================================================
   【模块 08】数字化仿真（CFD / 电气 / HIL / 环境 / 运维）
   搜索：.digital-section  .digital-grid  .digital-item  .digital-image
   ========================================================= */

.digital-section{
    position:relative;

    overflow:hidden;

    padding:22px 0;

    background:
        linear-gradient(
            145deg,
            var(--line),
            var(--bg) 45%,
            var(--line)
        );
}

.digital-grid{
    display:grid;
    grid-template-columns:1fr 200px 1fr;
    gap:15px;
    align-items:center;
}

.digital-card{
    padding:14px;

    border:1px solid var(--line);
    border-radius:10px;

    background:rgba(255,255,255,.85);

    box-shadow:var(--shadow);
}

.digital-card h3{
    margin:0 0 11px;

    color:var(--text);

    font-size:18px;
}

.digital-items{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
}

.digital-item{
    min-height:180px;

    padding:9px;

    border:1px solid var(--line);
    border-radius:7px;

    background:var(--panel);
}

.digital-image{
    height:100px;

    margin-bottom:7px;

    border-radius:6px;

    background:var(--digital-bg);
}

.digital-item:nth-child(1){
    --digital-bg:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue-2) 35%,
            var(--green) 55%,
            var(--yellow) 73%,
            var(--red)
        );
}

.digital-item:nth-child(2){
    --digital-bg:
        linear-gradient(
            135deg,
            var(--title),
            var(--blue-2) 48%,
            var(--dark-muted)
        );
}

.digital-item:nth-child(3){
    --digital-bg:
        linear-gradient(
            145deg,
            var(--text),
            var(--line)
        );
}

.digital-item:nth-child(4){
    --digital-bg:
        linear-gradient(
            145deg,
            var(--muted),
            var(--line)
        );
}

.digital-item:nth-child(5){
    --digital-bg:
        linear-gradient(
            145deg,
            var(--muted),
            var(--dark-muted)
        );
}

.digital-item strong{
    display:block;

    color:var(--title);

    font-size:13px;
}

.digital-item span{
    color:var(--muted);

    font-size:12px;
}


/* —— 模块 08 子块：系统身份标识 .identity —— */

.identity{
    position:relative;

    width:180px;
    height:240px;

    display:grid;
    place-items:center;

    border:2px solid var(--cyan);
    border-radius:12px;

    color:var(--panel);
    background:
        linear-gradient(
            145deg,
            var(--title),
            var(--blue)
        );

    box-shadow:
        0 0 24px rgba(46,152,225,.45);

    text-align:center;
}

.identity::before,
.identity::after{
    content:"";

    position:absolute;

    inset:-12px;

    border:1px solid rgba(57,159,230,.30);
    border-radius:15px;
}

.identity::after{
    inset:-23px;

    opacity:.45;
}

.identity strong{
    display:block;

    font-size:15px;
}

.identity span{
    display:block;

    margin-top:7px;

    color:var(--blue-soft);

    font-size:12px;
}


/* ---------------------------------------------------------
   【模块 08b】制造链路（Module→Pack→Rack→System→FAT）
   搜索：.manufacturing-grid  .manufacturing-item  .manufacturing-photo
   --------------------------------------------------------- */

.manufacturing-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
}

.manufacturing-item{
    min-height:180px;

    padding:8px;

    border:1px solid var(--line);
    border-radius:7px;

    background:var(--panel);
}

.manufacturing-photo{
    height:105px;

    margin-bottom:7px;

    border-radius:6px;

    background:
        linear-gradient(
            145deg,
            var(--muted),
            var(--line) 48%,
            var(--muted)
        );
}

.manufacturing-item strong{
    display:block;

    color:var(--title);

    font-size:13px;
}

.manufacturing-item span{
    color:var(--muted);

    font-size:12px;
}


/* =========================================================
   【模块 09】示范项目案例
   搜索：.project-case  .case-info  .case-site  .site-cabs
   ========================================================= */

.project-case{
    overflow:hidden;

    border:1px solid var(--line);
    border-radius:10px;

    background:var(--panel);

    box-shadow:var(--shadow);
}

.case-header{
    padding:16px;

    color:var(--title);

    font-size:22px;
    font-weight:900;
}

.case-main{
    display:grid;
    grid-template-columns:330px 1fr;
    gap:0;

    min-height:390px;
}

.case-info{
    padding:18px;

    background:
        linear-gradient(
            var(--bg),
            var(--panel)
        );
}

.case-info h3{
    margin:0 0 4px;

    color:var(--title);

    font-size:20px;
}

.case-info small{
    color:var(--blue);

    font-size:13px;
}

.case-list{
    display:grid;
    gap:7px;

    margin-top:12px;
}

.case-row{
    display:flex;
    justify-content:space-between;

    padding:7px 0;

    border-bottom:1px solid var(--line);

    color:var(--muted);

    font-size:13px;
}

.case-row strong{
    color:var(--title);
}

.case-site{
    position:relative;

    background:
        linear-gradient(
            145deg,
            var(--muted),
            var(--line-2) 43%,
            var(--muted)
        );
}

.site-cabs{
    position:absolute;

    left:8%;
    right:8%;
    top:22%;
    bottom:16%;

    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:8px;
}

.site-cabs i{
    border:2px solid var(--muted);

    background:
        linear-gradient(
            var(--line),
            var(--dark-muted)
        );
}

.site-road{
    position:absolute;

    left:0;
    right:0;
    bottom:55px;

    height:50px;

    transform:rotate(-5deg);

    background:var(--muted);
}


/* —— 模块 09 子块：应用场景卡片 .application-grid —— */

.application-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.application{
    min-height:165px;

    padding:10px;

    border-top:1px solid var(--line);

    background:var(--panel);
}

.application-photo{
    height:100px;

    margin-bottom:7px;

    border-radius:6px;

    background:
        linear-gradient(
            145deg,
            var(--muted),
            var(--line)
        );
}

.application strong{
    display:block;

    color:var(--title);

    font-size:14px;
}

.application span{
    color:var(--muted);

    font-size:13px;
}


/* =========================================================
   【模块 10】运维闭环（告警→风险→控制→工单→诊断→现场→恢复）
   搜索：.ops  .ops-grid  .ops-card  .ops-photo  .ops-timeline
   ========================================================= */

.ops{
    padding:22px 0 30px;

    color:var(--panel);

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(23,106,169,.22),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            var(--title),
            var(--title)
        );
}

.ops h2{
    margin:0 0 6px;

    color:var(--panel);

    font-size:28px;
    font-weight:900;
}

.ops-subtitle{
    color:var(--dark-muted);

    font-size:14px;
}

.ops-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;

    margin-top:16px;
}

.ops-card{
    position:relative;

    min-height:260px;

    padding:10px;

    border:2px solid transparent;
    border-radius:8px;

    background:rgba(255,255,255,.04);

    cursor:pointer;
}

.ops-card.active{
    border-color:var(--cyan);

    background:rgba(57,141,221,.10);
}

.ops-card h3{
    margin:0 0 7px;

    color:var(--panel);

    font-size:15px;
}

.ops-photo{
    height:145px;

    margin-bottom:8px;

    border-radius:6px;

    background:
        linear-gradient(
            145deg,
            var(--text),
            var(--title) 55%,
            var(--title)
        );
}

.ops-card span{
    color:var(--dark-muted);

    font-size:13px;
}

.ops-time{
    margin-top:8px;

    color:var(--c);

    font-size:13px;
    font-weight:900;
}


/* —— 模块 10 子块：时间轴 .ops-timeline —— */

.ops-timeline{
    position:relative;

    margin-top:22px;
    padding-top:20px;
}

.timeline-line{
    height:4px;

    border-radius:5px;

    background:
        linear-gradient(
            90deg,
            var(--red),
            var(--orange),
            var(--yellow),
            var(--green)
        );
}

.timeline-nodes{
    display:grid;
    grid-template-columns:repeat(7,1fr);

    margin-top:-9px;
}

.timeline-node{
    text-align:center;
}

.timeline-node i{
    width:15px;
    height:15px;

    display:block;

    margin:0 auto 8px;

    border:3px solid var(--panel);
    border-radius:50%;

    background:var(--c);
}

.timeline-node strong{
    color:var(--line);

    font-size:13px;
}

.ops-detail{
    margin-top:12px;

    padding:10px;

    border:1px solid rgba(105,174,225,.20);
    border-radius:6px;

    color:var(--line);
    background:rgba(255,255,255,.04);

    font-size:13px;
}


/* =========================================================
   【模块 11】通用悬停（卡片抬起）
   搜索：.cap-item:hover  .dist-item:hover
   ========================================================= */

.cap-item,
.dist-item,
.digital-item,
.manufacturing-item{
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.cap-item:hover,
.dist-item:hover,
.digital-item:hover,
.manufacturing-item:hover{
    transform:translateY(-4px);

    box-shadow:
        0 10px 22px rgba(37,79,119,.10);
}