body {
            background-color: #040914;
            color: #e2e8f0;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            overflow-x: hidden;
        }

        /* Tech Grid Background overlay */
        .grid-bg {
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
        }

        /* Glowing text effects */
        .text-glow-cyan {
            text-shadow: 0 0 10px rgba(0, 240, 255, 0.7), 0 0 20px rgba(0, 240, 255, 0.4);
        }

        .text-glow-blue {
            text-shadow: 0 0 10px rgba(0, 114, 255, 0.7);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: #040914;
        }
        ::-webkit-scrollbar-thumb {
            background: #00f0ff;
            border-radius: 3px;
        }

        .dalu-logo{width:132px;height:auto;display:block;object-fit:contain}
@media (pointer:fine) {
            body, a, button, input, select, textarea { cursor: none !important; }
            #daluCursor {
                position: fixed; left: 0; top: 0; width: 7px; height: 7px;
                border-radius: 50%; background: #00f0ff; pointer-events: none;
                z-index: 99999; transform: translate3d(-20px,-20px,0);
                box-shadow: 0 0 7px #00f0ff, 0 0 16px rgba(0,240,255,.55);
                will-change: transform;
            }
        }

/* === DALU target cursor revision === */
@media (pointer:fine) {
  body, a, button, input, select, textarea { cursor: none !important; }

  /* Keep old cursor element harmless if it exists */
  #daluCursor, #cursor { display:none !important; }

  #daluTargetCursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    pointer-events: none;
    z-index: 99999;
    transform: translate3d(-100px,-100px,0);
    will-change: transform;
  }

  #daluTargetCursor .h,
  #daluTargetCursor .v {
    position:absolute;
    background:rgba(0,234,255,.78);
    box-shadow:0 0 6px rgba(0,234,255,.75);
  }
  #daluTargetCursor .h {
    left:-13px; top:18.5px;
    width:64px; height:1px;
  }
  #daluTargetCursor .v {
    left:18.5px; top:-13px;
    width:1px; height:64px;
  }
  #daluTargetCursor .ring {
    position:absolute;
    inset:8px;
    border:1px solid rgba(0,234,255,.76);
    border-radius:50%;
    box-shadow:
      0 0 8px rgba(0,234,255,.34),
      inset 0 0 8px rgba(0,234,255,.16);
  }
  #daluTargetCursor .dot {
    position:absolute;
    left:16px; top:16px;
    width:6px; height:6px;
    border-radius:50%;
    background:#9afaff;
    box-shadow:0 0 6px #00eaff,0 0 13px rgba(0,234,255,.8);
  }
  #daluTargetCursor .corner {
    position:absolute;
    width:7px;height:7px;
    border-color:rgba(0,234,255,.65);
  }
  #daluTargetCursor .c1 {left:2px;top:2px;border-left:1px solid;border-top:1px solid}
  #daluTargetCursor .c2 {right:2px;top:2px;border-right:1px solid;border-top:1px solid}
  #daluTargetCursor .c3 {left:2px;bottom:2px;border-left:1px solid;border-bottom:1px solid}
  #daluTargetCursor .c4 {right:2px;bottom:2px;border-right:1px solid;border-bottom:1px solid}

  #daluTargetCursor.lock .ring {
    transform:scale(.76);
    border-color:#b9fdff;
    box-shadow:0 0 12px rgba(0,234,255,.72),inset 0 0 9px rgba(0,234,255,.28);
  }
  #daluTargetCursor .ring {transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
}
@media (pointer:coarse) {
  #daluTargetCursor {display:none!important}
}

/* === V4 BORDER CLEANUP: continuous rounded boxes === */
.clip-corner,
.hud-frame,
.section-shell,
.section,
.card,
.mission,
.topo-screen,
.tele-panel,
.kicker,
.btn,
.est,
[class*="clip-corner"] {
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Main content frames */
section,
.section,
.section-shell {
    border-radius: 16px !important;
}

/* Panels / cards */
.card,
.mission,
.topo-screen,
.tele-panel,
.bg-slate-900\/60,
.bg-slate-950\/60,
.bg-cyan-950\/20,
.bg-cyan-950\/30,
.bg-cyan-950\/40,
.bg-cyan-950\/60 {
    border-radius: 12px !important;
}

/* Buttons, labels and smaller controls */
button,
.btn,
.kicker,
.est,
.topo-btn,
a[class*="border"] {
    border-radius: 9px !important;
}

/* Prevent decorative pseudo-elements from visually cutting box borders */
.section::before,
.section-shell::before,
.card::before,
.hud-frame::before {
    border-radius: inherit;
}

/* Any old corner decorations that sit over the actual border are suppressed */
.corner-cut,
.cut-corner,
.tech-corner,
.hud-corner,
.frame-corner {
    display:none !important;
}

/* Keep border rendering clean over transparent/glass backgrounds */
.section,
.section-shell,
.card,
.mission,
.topo-screen,
.tele-panel {
    background-clip: padding-box !important;
}

/* Local production utilities: no web-font/icon/CDN dependency */
.font-mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace!important}
.font-sans{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.shadow-neon-cyan{box-shadow:0 0 15px rgba(0,240,255,.4),inset 0 0 15px rgba(0,240,255,.2)}
.local-icon{display:inline-block;min-width:1em;text-align:center;font-family:Arial,sans-serif;font-style:normal;line-height:1}


/* === Production responsive repair === */
@media (min-width: 768px) {
  #hero > .grid {
    grid-template-columns: repeat(12, minmax(0,1fr)) !important;
  }
  #hero > .grid > :first-child {
    grid-column: span 7 / span 7 !important;
  }
  #hero > .grid > :nth-child(2) {
    grid-column: span 5 / span 5 !important;
  }
}
#hero video {
  display:block;
  width:100%;
  height:auto;
  max-width:520px;
  margin-inline:auto;
  background:transparent;
}
@media (max-width: 767px) {
  #hero video { max-width:440px; }
}


/* === Gas Flow Monitoring canvas repair ===
   Canvas is constrained by its wrapper. Its backing-store pixel size is
   controlled only from JavaScript and can no longer expand the document. */
.gas-chart-frame{
  position:relative;
  width:100%;
  height:260px;
  min-height:260px;
  max-height:260px;
  overflow:hidden;
  background:transparent;
}
.gas-chart-frame > #gasChart{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  background:transparent !important;
}
@media (max-width:767px){
  .gas-chart-frame{
    height:220px;
    min-height:220px;
    max-height:220px;
  }
}


/* === Gas card visual repair === */
.gas-chart-frame{
  height:205px !important;
  min-height:205px !important;
  max-height:205px !important;
  margin-bottom:14px;
}
#gasChart{
  overflow:hidden;
}

/* Gas metric boxes must stay in normal flow, never cover the chart. */
#telemetry .gas-metrics,
#telemetry [data-gas-metrics]{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  margin-top:10px !important;
}

/* RFID terminal: neon-green log text requested */
#telemetry .rfid-log,
#telemetry [data-rfid-log],
#telemetry pre,
#telemetry .terminal-log{
  color:#20ff9a !important;
  text-shadow:0 0 7px rgba(32,255,154,.28);
}

[data-rfid-card="true"] .font-mono,
[data-rfid-card="true"] .text-gray-300,
[data-rfid-card="true"] .text-gray-400{
  color:#20ff9a !important;
}

/* Exact Gas Flow card geometry */
#gasChart{width:100%!important;height:100%!important}
#gasChart.closest-fallback{display:block}
#gasChart{max-height:144px!important}
#gasChart{max-width:100%!important}
.gas-chart-frame{
  width:100%!important;
  height:144px!important;
  min-height:144px!important;
  max-height:144px!important;
  margin:0!important;
  overflow:hidden!important;
}

/* Exact RFID log selector */
#rfidLogs,
#rfidLogs p{
  color:#20ff9a!important;
  text-shadow:0 0 6px rgba(32,255,154,.24);
}


/* === Stable performance pass ===
   Visual/layout behavior intentionally unchanged. */
#daluTargetCursor{
  will-change:transform;
  backface-visibility:hidden;
}
#blueprintCanvas{
  will-change:contents;
}


/* === Hero scan frame follows media dimensions === */
.hero-scan-media{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
.hero-scan-media video{
  display:block;
  width:100%;
  height:auto;
}
.hero-scan-media::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(0,229,255,.28);
  pointer-events:none;
  box-sizing:border-box;
}
/* Hide the old oversized decorative rectangle only inside the media wrapper if present. */
.hero-scan-media > .absolute{
  display:none!important;
}


/* === Hero scan composition v3 ===
   Frame and caption are anchored to the actual video footprint. */
.hero-scan-media{
  --scan-frame-gap: 14px;
  position:relative !important;
  display:block !important;
  width:min(100%, 520px) !important;
  max-width:520px !important;
  margin-inline:auto !important;
  padding:0 !important;
  overflow:visible !important;
}

.hero-scan-media video{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:contain !important;
}

/* precise neon frame: slightly outside the video, same aspect/footprint */
.hero-scan-media::after{
  content:"" !important;
  position:absolute !important;
  z-index:1 !important;
  inset:calc(var(--scan-frame-gap) * -1) !important;
  border:1px solid rgba(0,229,255,.30) !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
}

/* Caption is attached to the frame, not to the hero column */
.hero-scan-media::before{
  content:"INTEGRATED ENGINEERING SYSTEM" !important;
  position:absolute !important;
  z-index:3 !important;
  left:50% !important;
  bottom:calc((var(--scan-frame-gap) + 7px) * -1) !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:88% !important;
  padding:0 10px !important;
  background:#030914 !important;
  color:rgba(0,229,255,.48) !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.24em !important;
  white-space:nowrap !important;
  text-align:center !important;
  pointer-events:none !important;
}

/* Hide only the OLD decorative frame/caption inside the hero media area.
   Video itself remains untouched. */
.hero-scan-media > .absolute,
.hero-scan-media > [class*="tracking-"][class*="absolute"]{
  display:none !important;
}

@media (max-width:767px){
  .hero-scan-media{
    --scan-frame-gap:10px;
    width:min(92vw, 460px) !important;
  }
  .hero-scan-media::before{
    font-size:7px !important;
    letter-spacing:.17em !important;
    max-width:94% !important;
  }
}

/* Final semantic caption override */
.hero-scan-media::before{content:none!important}
.hero-scan-caption{
  position:absolute;
  z-index:3;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  width:max-content;
  max-width:88%;
  padding:0 10px;
  background:#030914;
  color:rgba(0,229,255,.48);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:8px;
  line-height:1;
  letter-spacing:.24em;
  white-space:nowrap;
  text-align:center;
  pointer-events:none;
}
@media(max-width:767px){
  .hero-scan-caption{bottom:-18px;font-size:7px;letter-spacing:.17em;max-width:94%}
}


/* === Hero scan frame v4: exact four-side wrap + detached caption === */
.hero-scan-media{
  --caption-gap:16px;
  position:relative !important;
  display:block !important;
  width:min(100%,520px) !important;
  max-width:520px !important;
  margin-inline:auto !important;
  padding:0 !important;
  overflow:visible !important;
  border:1px solid rgba(0,229,255,.38) !important;
  box-sizing:border-box !important;
}

/* Remove the pseudo-frame from v3. The wrapper border is now the frame itself. */
.hero-scan-media::after{
  content:none !important;
  display:none !important;
}

.hero-scan-media video{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:contain !important;
}

/* Caption sits clearly below the closed rectangle, not on its bottom border. */
.hero-scan-caption{
  position:absolute !important;
  z-index:3 !important;
  left:50% !important;
  top:calc(100% + var(--caption-gap)) !important;
  bottom:auto !important;
  transform:translateX(-50%) !important;
  width:max-content !important;
  max-width:92% !important;
  padding:0 8px !important;
  margin:0 !important;
  background:transparent !important;
  color:rgba(0,229,255,.52) !important;
  font-size:8px !important;
  line-height:1.25 !important;
  letter-spacing:.22em !important;
  white-space:nowrap !important;
  text-align:center !important;
  pointer-events:none !important;
}

@media(max-width:767px){
  .hero-scan-media{
    --caption-gap:12px;
    width:min(92vw,460px) !important;
  }
  .hero-scan-caption{
    font-size:7px !important;
    letter-spacing:.16em !important;
  }
}


/* === Hero scan v5: guaranteed closed neon frame === */
.hero-scan-media{
  position:relative !important;
  display:block !important;
  width:min(100%,520px) !important;
  max-width:520px !important;
  margin-inline:auto !important;
  padding:0 !important;
  border:0 !important;
  overflow:visible !important;
  isolation:isolate;
}
.hero-scan-media video{
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  object-fit:contain !important;
  background:transparent !important;
}
.hero-scan-media::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:5 !important;
  inset:0 !important;
  box-sizing:border-box !important;
  border:1px solid rgba(0,229,255,.52) !important;
  box-shadow:0 0 10px rgba(0,229,255,.08), inset 0 0 10px rgba(0,229,255,.04) !important;
  pointer-events:none !important;
}
.hero-scan-caption{
  top:calc(100% + 16px) !important;
  bottom:auto !important;
  background:transparent !important;
}
@media(max-width:767px){
  .hero-scan-caption{top:calc(100% + 12px) !important}
}