:root{
      --bg:#03070c;
      --bg-deep:#02060a;
      --bg-blue:#061320;
      --panel:#0a1420;
      --panel-2:#0c1825;
      --gold:#d39a45;
      --gold-light:#f1c372;
      --gold-soft:rgba(211,154,69,.14);
      --line:rgba(255,255,255,.08);
      --line-gold:rgba(211,154,69,.26);
      --text:#ffffff;
      --muted:rgba(255,255,255,.72);
      --muted-2:rgba(255,255,255,.48);
      --page-x:clamp(18px,2vw,36px);
      --section-gap:clamp(14px,1.3vw,22px);
      --radius:8px;
      --shadow:0 18px 40px rgba(0,0,0,.22);
    }

    *{box-sizing:border-box}
    html{
      width:100%;
      min-width:320px;
      scroll-behavior:smooth;
      background:#000;
    }
    body{
      margin:0;
      min-width:320px;
      overflow-x:hidden;
      color:var(--text);
      font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif;
      background:
        radial-gradient(circle at 50% 0%, rgba(211,154,69,.07), transparent 18%),
        linear-gradient(180deg,#010305 0%,#02060a 100%);
    }
    a{color:inherit;text-decoration:none}
    button{font:inherit;color:inherit}

    .page{
      width:100%;
      min-height:100vh;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      background:
        linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
        linear-gradient(180deg,#04101a 0%,#02070c 100%);
      background-size:72px 72px,72px 72px,auto;
    }
    .page::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:
        radial-gradient(circle at 15% 18%, rgba(13,49,76,.22), transparent 18%),
        radial-gradient(circle at 85% 12%, rgba(13,49,76,.18), transparent 16%),
        radial-gradient(circle at 50% 42%, rgba(211,154,69,.05), transparent 20%);
    }

    /* ===== 首屏 ===== */
    .hero{
      position:relative;
      width:100%;
      height:100vh;
      min-height:560px;
      overflow:hidden;
      background:#060a0e;
      border-bottom:1px solid rgba(255,255,255,.05);
    }
    .hero-visual{
      position:absolute;
      inset:0;
      overflow:hidden;
    }
    .hero-bg-img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 32%,rgba(0,0,0,.18) 56%,rgba(0,0,0,.08) 100%);
      pointer-events:none;
    }
    .hero-floor{
      position:absolute;
      inset:auto 0 0 0;
      height:32%;
      background:
        linear-gradient(180deg,rgba(255,255,255,.06),transparent 14%),
        linear-gradient(180deg,#455261 0%,#222a33 36%,#10151a 100%);
    }
    .hero-hall-left,
    .hero-hall-right{
      position:absolute;
      top:0;
      bottom:0;
      width:50%;
      background:linear-gradient(180deg,#0e1824 0%,#101b28 40%,#0a1119 100%);
      opacity:.98;
    }
    .hero-hall-left{left:0}
    .hero-hall-right{right:0}
    .grid-line-v,
    .grid-line-h,
    .machine-box,
    .pillar{
      position:absolute;
    }
    .pillar{
      top:0;
      bottom:0;
      width:18px;
      background:linear-gradient(180deg,#273646 0%,#1a2430 48%,#10161e 100%);
      box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
    }
    .p1{left:44%}
    .p2{left:58%}
    .p3{left:71%}
    .p4{left:84%}
    .grid-line-v{
      top:0;
      bottom:0;
      width:1px;
      background:rgba(255,255,255,.07);
      opacity:.55;
    }
    .v1{left:52%}.v2{left:64%}.v3{left:76%}.v4{left:88%}
    .grid-line-h{
      left:40%;
      right:0;
      height:1px;
      background:rgba(255,255,255,.06);
    }
    .h1{top:18%}.h2{top:34%}.h3{top:50%}.h4{top:66%}
    .light-dot{
      position:absolute;
      width:6px;
      height:6px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 0 12px rgba(255,255,255,.8),0 0 26px rgba(211,154,69,.45);
      opacity:.9;
    }
    .d1{left:45%;top:14%}.d2{left:50%;top:22%}.d3{left:58%;top:18%}.d4{left:64%;top:28%}
    .d5{left:72%;top:20%}.d6{left:78%;top:34%}.d7{left:86%;top:18%}.d8{left:92%;top:28%}
    .machine-box{
      width:88px;
      height:152px;
      background:linear-gradient(180deg,#eef2f5 0%,#d7dee4 55%,#b4bcc4 100%);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:0 16px 32px rgba(0,0,0,.24);
    }
    .machine-box::before{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      top:18px;
      height:56px;
      border:1px dashed rgba(17,24,39,.18);
      background:rgba(255,255,255,.08);
    }
    .machine-box::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:18px;
      background:linear-gradient(180deg,#9aa4ad 0%,#79848e 100%);
    }
    .m1{right:18%;bottom:18%}
    .m2{right:8%;bottom:16%;height:164px}
    .m3{right:28%;bottom:17%;height:146px}

    .hero-inner{
      position:relative;
      z-index:2;
      width:100%;
      min-height:inherit;
      display:grid;
      grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr);
      align-items:center;
      padding:0 var(--page-x);
    }
    .hero-inner .hero-copy{
      position:relative;
      max-width:640px;
      padding:50px 0;
      opacity:1;
      pointer-events:auto;
    }
    .hero-inner .hero-tag{
      margin:0 0 16px;
      color:var(--gold-light);
      font-size:clamp(20px,1.3vw,24px);
      letter-spacing:.22em;
      text-transform:uppercase;
    }
    .hero-inner .hero-title{
      margin:0;
      font-size:clamp(52px,4.5vw,90px);
      line-height:1.08;
      font-weight:900;
      color:#fff;
      letter-spacing:.03em;
      text-shadow:0 8px 24px rgba(0,0,0,.24);
    }
    .hero-inner .hero-subtitle{
      margin:18px 0 0;
      color:var(--gold-light);
      font-size:clamp(22px,1.55vw,32px);
      font-weight:700;
      line-height:1.45;
    }

    .breadcrumb{
      display:flex;
      align-items:center;
      gap:10px;
      padding:16px var(--page-x);
      background:linear-gradient(180deg,rgba(6,14,22,.95),rgba(5,11,18,.98));
      border-bottom:1px solid rgba(255,255,255,.06);
      font-size:13px;
    }
    .breadcrumb a{
      color:rgba(255,255,255,.60);
      transition:color .2s;
    }
    .breadcrumb a:hover{color:var(--gold-light)}
    .breadcrumb .sep{
      color:rgba(255,255,255,.30);
      font-size:11px;
    }
    .breadcrumb .cur{
      color:var(--gold-light);
      font-weight:600;
    }

    /* ===== 证书网格 ===== */
    .honors{
      width:100%;
      padding:28px var(--page-x) 20px;
      background:linear-gradient(180deg,#07131e 0%,#040b12 100%);
    }
    .honor-grid{
      width:100%;
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:clamp(14px,1vw,20px) var(--section-gap);
    }
    .honor-card{
      min-width:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
    }
    .certificate{
      position:relative;
      width:100%;
      aspect-ratio:1.3 / 1;
      border:2px solid rgba(207,171,103,.7);
      background:linear-gradient(180deg,#f6f0df 0%,#fdf8ef 52%,#ebe1ca 100%);
      box-shadow:0 10px 24px rgba(0,0,0,.18);
      overflow:hidden;
    }
    .certificate .hero-bg-img{
      inset:12px;
      width:calc(100% - 24px);
      height:calc(100% - 24px);
      object-fit:contain;
    }
    .certificate::before{
      content:"";
      position:absolute;
      inset:10px;
      border:1px solid rgba(174,138,76,.55);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
    }
    .certificate::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      top:18px;
      bottom:18px;
      border:1px dashed rgba(174,138,76,.32);
    }
    .certificate.alt-green{
      background:linear-gradient(180deg,#eef0df 0%,#fcfcef 52%,#e6e8d0 100%);
      border-color:rgba(149,154,103,.75);
    }
    .certificate.alt-red{
      background:linear-gradient(180deg,#f7efe8 0%,#fff8f3 52%,#ebdfd5 100%);
      border-color:rgba(191,144,124,.75);
    }
    .certificate.alt-gold{
      background:linear-gradient(180deg,#f4ebda 0%,#fff8ee 52%,#eadcc3 100%);
      border-color:rgba(201,170,112,.8);
    }
    .cert-corner{
      position:absolute;
      width:32px;
      height:32px;
      border-color:rgba(185,149,89,.58);
      border-style:solid;
      opacity:.75;
    }
    .ct-lt{left:7px;top:7px;border-width:2px 0 0 2px}
    .ct-rt{right:7px;top:7px;border-width:2px 2px 0 0}
    .ct-lb{left:7px;bottom:7px;border-width:0 0 2px 2px}
    .ct-rb{right:7px;bottom:7px;border-width:0 2px 2px 0}
    /* .cert-badge{
      position:absolute;
      top:12px;
      left:50%;
      transform:translateX(-50%);
      width:34px;
      height:34px;
      border-radius:50%;
      border:2px solid rgba(120,135,166,.65);
      background:rgba(255,255,255,.68);
    } */
    .cert-title{
      position:absolute;
      left:22px;
      right:22px;
      top:56px;
      text-align:center;
      color:#6b5024;
      font-size:clamp(14px,.95vw,18px);
      font-weight:700;
      letter-spacing:.08em;
    }
    .cert-lines{
      position:absolute;
      left:22px;
      right:22px;
      top:88px;
      display:grid;
      gap:8px;
    }
    .cert-lines span{
      display:block;
      height:6px;
      border-radius:999px;
      background:rgba(96,82,64,.16);
    }
    .cert-lines span:nth-child(2){width:92%;margin:0 auto}
    .cert-lines span:nth-child(3){width:82%;margin:0 auto}
    .cert-lines span:nth-child(4){width:72%;margin:0 auto}
    .cert-seals{
      position:absolute;
      left:18px;
      right:18px;
      bottom:16px;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
    }
    /* .seal-group{
      display:flex;
      gap:8px;
      align-items:center;
    } */
    .seal{
      width:24px;
      height:24px;
      border-radius:50%;
      border:2px solid rgba(129,122,161,.5);
      background:rgba(255,255,255,.55);
    }
    .seal.red{
      width:30px;
      height:30px;
      border-color:rgba(180,62,56,.42);
      background:rgba(211,93,87,.10);
    }
    .honor-name{
      margin:0;
      text-align:center;
      color:var(--gold-light);
      font-size:15px;
      line-height:1.4;
      letter-spacing:.02em;
    }

    /* ===== 分页 ===== */
    .pager-wrap{
      padding:26px var(--page-x) 42px;
      background:linear-gradient(180deg,#07131e 0%,#040b12 100%);
    }
    .pager{
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }
    .pager-arrow,
    .pager-num{
      display:grid;
      place-items:center;
      min-width:38px;
      height:38px;
      padding:0 10px;
      border:1px solid transparent;
      background:transparent;
      color:rgba(255,255,255,.72);
      font-size:20px;
      cursor:pointer;
      transition:.2s ease;
    }
    .pager-arrow:hover,
    .pager-num:hover{color:#fff}
    .pager-num{
      min-width:42px;
      border-color:rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      font-size:18px;
      border-radius:2px;
    }
    .pager-num.active{
      color:#17120c;
      font-weight:700;
      border-color:rgba(241,195,114,.95);
      background:linear-gradient(180deg,rgba(241,195,114,.94),rgba(211,154,69,.98));
      box-shadow:0 8px 18px rgba(211,154,69,.18);
    }

    /* ===== 响应式 ===== */
    @media (max-width:1500px){
      .hero-inner{grid-template-columns:minmax(320px,.9fr) minmax(360px,1.1fr)}
    }

    @media (max-width:1180px){
      .hero-inner{grid-template-columns:1fr}
      .hero-inner .hero-copy{max-width:720px;padding:56px 0 42px}
      .honor-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    }

    @media (max-width:980px){
      .hero{min-height:480px}
      .hero-inner .hero-title{font-size:52px}
      .hero-inner .hero-subtitle{font-size:22px}
      .honor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    }

    @media (max-width:640px){
      .hero{min-height:430px}
      .hero-inner{padding:0 14px}
      .hero-inner .hero-tag{font-size:16px}
      .hero-inner .hero-title{font-size:40px}
      .hero-inner .hero-subtitle{font-size:18px}
      .honor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .honor-name{font-size:14px}
      .pager{gap:10px}
      .pager-arrow,.pager-num{min-width:34px;height:34px;font-size:16px}
    }

    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *{transition:none !important}
    }