/* ================================================================
   3D + SYSTEM MODULES — v3 additions for zjtraffic.cn
   Loaded AFTER style.css.  Owns:
     - .scene-hero        (Three.js WebGL hero cone-on-road scene)
     - .modules-band      (3 System Modules band under hero)
   ================================================================ */

/* ---------- Nav active state (multi-page navigation) ---------- */
.nav-links a{position:relative;padding:6px 2px;transition:color .15s}
.nav-links a:hover{color:#F26A21}
.nav-links a.active{color:#F26A21;font-weight:600}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#F26A21;
}

/* ---------- Hero 3D scene container ---------- */
.hero-visual .cone{display:none} /* remove any legacy emoji leftover */

.scene-hero{
  width:100%;
  height:300px;
  border-radius:12px;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%,rgba(242,106,33,.10),transparent 60%);
  margin-bottom:14px;
  position:relative;
}
.scene-hero canvas,.scene-hero svg{display:block;width:100%;height:100%}

/* Mobile: hide the WebGL canvas (JS also skips loading Three.js) and fall back to a
   static SVG cone so the layout stays balanced */
@media(max-width:700px){
  .scene-hero{
    height:220px;
    background:
      radial-gradient(ellipse at 50% 88%,rgba(0,0,0,.4),transparent 60%),
      radial-gradient(ellipse at 50% 60%,rgba(242,106,33,.10),transparent 60%);
  }
  .scene-hero::before{
    content:"";display:block;width:100%;height:100%;
    background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'><ellipse cx='100' cy='200' rx='70' ry='10' fill='rgba(0,0,0,0.35)'/><path d='M100 20 L145 190 L55 190 Z' fill='%23F26A21'/><rect x='66' y='105' width='68' height='14' fill='%23fff'/><rect x='72' y='145' width='56' height='10' fill='%23fff'/><rect x='45' y='185' width='110' height='18' rx='4' fill='%230F2F4C'/></svg>");
  }
}

/* ---------- SYSTEM MODULES BAND ---------- */
.modules-band{
  padding:80px 0;
  background:linear-gradient(180deg,#0a1626 0%,#0F2F4C 100%);
  color:#e6ecf5;
  position:relative;
  overflow:hidden;
}
.modules-band::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(242,106,33,.06) 0 1px,transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(242,106,33,.06) 0 1px,transparent 1px 80px);
  pointer-events:none;
}
.modules-band .container{position:relative;z-index:1}

.modules-head{text-align:center;margin-bottom:48px}
.modules-kicker{
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:3px;color:#F26A21;
  text-transform:uppercase;font-weight:700;
}
.modules-head h2{
  font-size:34px;font-weight:700;color:#fff;line-height:1.2;
  margin:12px 0 12px;letter-spacing:-.5px;
}
.modules-head h2 em{color:#FFC130;font-style:normal}
.modules-head p{color:#a9b6c6;font-size:16px;max-width:660px;margin:0 auto;line-height:1.6}

.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.modules-grid{grid-template-columns:1fr}}

.module{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:28px 26px 24px;
  color:#e6ecf5;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
  text-decoration:none;
  overflow:hidden;
}
.module::before{
  content:"";position:absolute;top:0;left:0;width:80px;height:3px;background:#F26A21;
  transition:width .3s ease;
}
.module:hover{
  transform:translateY(-6px);
  border-color:rgba(242,106,33,.55);
  box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 0 1px rgba(242,106,33,.25);
  background:linear-gradient(160deg,rgba(242,106,33,.10),rgba(255,255,255,.03));
}
.module:hover::before{width:100%}
.module:hover .module-cta{color:#FFC130}
.module:hover .module-icon{transform:scale(1.08) rotate(-4deg)}

.module-code{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;color:#7a8ca6;text-transform:uppercase}
.module-icon{transition:transform .35s ease;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.module h3{font-size:26px;font-weight:800;color:#fff;letter-spacing:1.5px;margin:2px 0 4px}
.module-desc{color:#a9b6c6;font-size:14px;line-height:1.55}
.module-list{
  list-style:none;padding:14px 0;margin:0;
  border-top:1px dashed rgba(255,255,255,.14);
  border-bottom:1px dashed rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:8px;
}
.module-list li{font-family:'JetBrains Mono',monospace;font-size:12px;color:#cfd8e3;padding-left:18px;position:relative}
.module-list li::before{content:"›";position:absolute;left:0;color:#F26A21;font-weight:700}
.module-cta{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;color:#F26A21;letter-spacing:1px;text-transform:uppercase;margin-top:4px;transition:color .2s}

.modules-foot{text-align:center;margin-top:36px;color:#7a8ca6;font-size:13px;font-family:'JetBrains Mono',monospace;letter-spacing:.5px}
.modules-foot span{color:#F26A21;font-weight:700;margin-right:6px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .module{transition:none}
  .module:hover{transform:none}
}