/* ============================================================================
   MetalSplot Solutions — Future Lab / Matte Industrial
   Custom layer on top of Tailwind (square corners, matte graphite, laser cyan)
   ========================================================================== */

:root{
  --graphite-950:#0c0d0e;
  --graphite-900:#121315;
  --graphite-850:#161719;
  --graphite-800:#1a1c1e;
  --line:#27272a;          /* zinc-800 */
  --line-soft:#1d1e21;
  --laser:#00f3ff;
}

*{ border-radius:0 !important; }      /* strict: no rounded corners anywhere */

html{ scroll-behavior:smooth; background:var(--graphite-950); }
body{
  background:var(--graphite-950);
  color:#d4d4d8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{ background:var(--laser); color:#06080a; }

/* Matte blueprint grid — fixed, behind everything, ultra-subtle */
.blueprint{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:80px 80px;
}
/* faint matte vignette so panels read as sintered metal, never glossy */
.blueprint::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% -10%, rgba(0,243,255,.035), transparent 60%);
}

/* Canvas structure layers always fill their host, sit behind content */
canvas[data-structure]{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  z-index:0;
}

/* Laser status dot */
.dot-live{
  width:6px; height:6px; background:var(--laser);
  box-shadow:0 0 0 0 rgba(0,243,255,.5);
  animation:livePulse 2.4s infinite;
  display:inline-block;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(0,243,255,.45); }
  70%{ box-shadow:0 0 0 7px rgba(0,243,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,243,255,0); }
}

/* Hardware button — flat, square, smooth state transition */
.btn-hw{
  border:1px solid #3f3f46; background:transparent;
  padding:.7rem 1.25rem;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:#e4e4e7; transition:all .25s ease; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
}
.btn-hw:hover{ border-color:var(--laser); color:var(--laser); background:rgba(0,243,255,.04); }
.btn-hw--solid{ border-color:var(--laser); color:var(--laser); background:rgba(0,243,255,.06); }
.btn-hw--solid:hover{ background:rgba(0,243,255,.12); }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Scan-line accent on section headers */
.scanmark{ position:relative; padding-left:1rem; }
.scanmark::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:2px;
  background:var(--laser); box-shadow:0 0 12px rgba(0,243,255,.6);
}

/* Corner crosshair instrumentation */
.xhair{ position:absolute; width:10px; height:10px; pointer-events:none; opacity:.5; }
.xhair::before,.xhair::after{ content:''; position:absolute; background:#52525b; }
.xhair::before{ left:0; right:0; top:50%; height:1px; }
.xhair::after{ top:0; bottom:0; left:50%; width:1px; }

/* ===========================================================================
   SPEC MODALS — matte graphite lab sheet
   ========================================================================== */
.ms-modal{
  display:none; position:fixed; inset:0; z-index:9999;
  background:rgba(6,8,10,.86); backdrop-filter:blur(8px);
  justify-content:center; align-items:flex-start; padding:6vh 1.25rem;
}
.ms-modal.open{ display:flex; }
.ms-modal__panel{
  background:var(--graphite-900); border:1px solid #2f2f33;
  width:100%; max-width:980px; max-height:84vh; overflow-y:auto; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.ms-modal__close{
  position:absolute; top:1rem; right:1rem; background:none; border:1px solid #3f3f46;
  width:40px; height:40px; color:#a1a1aa; font-size:1.4rem; line-height:1; cursor:pointer;
  transition:all .2s; display:flex; align-items:center; justify-content:center;
}
.ms-modal__close:hover{ border-color:var(--laser); color:var(--laser); }
.ms-modal__head{ padding:2rem 2rem 1.25rem; border-bottom:1px solid var(--line); }
.ms-modal__head h2{
  font-family:'Geist',sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; font-size:1.7rem; color:#f4f4f5; margin:0;
}
.ms-modal__kicker{
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--laser); margin-top:.4rem;
}
.ms-tabs{ display:flex; flex-wrap:wrap; gap:0; padding:0 2rem; border-bottom:1px solid var(--line); background:var(--graphite-850); }
.ms-tab{
  background:none; border:none; border-bottom:2px solid transparent; padding:.9rem 1rem;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.1em;
  color:#71717a; cursor:pointer; transition:all .2s;
}
.ms-tab:hover{ color:#d4d4d8; }
.ms-tab.active{ color:var(--laser); border-bottom-color:var(--laser); }
.ms-modal__body{ padding:2rem; }
.ms-pane{ display:none; }
.ms-pane.active{ display:block; }
.ms-modal__body p{ color:#a1a1aa; line-height:1.7; font-size:.92rem; margin-bottom:1.1rem; }
.ms-modal__body ul{ list-style:none; padding:0; margin:0 0 1.25rem; }
.ms-modal__body li{ color:#a1a1aa; line-height:1.6; font-size:.9rem; padding:.4rem 0 .4rem 1.1rem; position:relative; }
.ms-modal__body li::before{ content:'›'; position:absolute; left:0; color:var(--laser); }
.ms-modal__body strong{ color:#f4f4f5; }

.tech-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; margin-bottom:1.75rem; border:1px solid var(--line); }
.tech-cell{ padding:1rem 1.1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.tech-cell label{ display:block; font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:#71717a; margin-bottom:.4rem; }
.tech-cell span{ font-family:'Geist',sans-serif; font-weight:700; font-size:1.05rem; color:#f4f4f5; }

.tbl-wrap{ width:100%; overflow-x:auto; border:1px solid var(--line); margin:1.25rem 0; }
.ms-table{ width:100%; border-collapse:collapse; font-size:.82rem; min-width:480px; }
.ms-table th{
  background:var(--graphite-850); text-align:left; padding:.85rem .75rem;
  border-bottom:1px solid var(--laser); color:var(--laser);
  font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.ms-table th small{ color:#52525b; font-weight:400; text-transform:none; letter-spacing:0; }
.ms-table td{ padding:.75rem; border-bottom:1px solid var(--line-soft); color:#c4c4c8; vertical-align:top; }
.ms-table tr:hover td{ background:rgba(0,243,255,.03); }
.ms-table td strong{ color:#f4f4f5; }
.ms-fineprint{ font-size:.72rem; color:#52525b; border-top:1px solid var(--line); padding-top:1rem; margin-top:1.25rem; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--graphite-950); }
::-webkit-scrollbar-thumb{ background:#2a2a2e; border:2px solid var(--graphite-950); }
::-webkit-scrollbar-thumb:hover{ background:#3f3f46; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* Responsive */
@media (max-width:1024px){
  .lab-metrics{ border-left:0 !important; border-top:1px solid var(--line); }
}
@media (max-width:768px){
  .ms-modal__body{ padding:1.25rem; }
  .ms-modal__head{ padding:1.5rem 1.25rem 1rem; }
  .ms-tabs{ padding:0 1.25rem; }
  .nav-mono-links{ display:none !important; }
}