/* SPECTRUM ENGINE — secondary-page content system. */
.pwrap { position: relative; z-index: 10; max-width: 1100px; margin: 0 auto;
  padding: 16vh 6vw 12vh; padding-bottom: max(12vh, 130px); }
.ptitle { font-family: var(--display, 'Bank Gothic', sans-serif);
  font-size: 5.2vw; font-weight: 700; letter-spacing: .01em;
  line-height: .98; margin: 0 0 1.2vh; }
.ptitle i { color: var(--spec); font-style: normal; }
.psub { font-family: var(--mono); color: var(--spec); letter-spacing: .3em;
  font-size: 12px; margin: 0 0 6vh; }
.plead { max-width: 640px; color: var(--ink); font-size: 17px; }
.pwrap section { margin-top: 9vh; }
.pwrap h2 { font-family: var(--display, 'Bank Gothic', sans-serif);
  font-size: 2rem; letter-spacing: .01em; margin: 0 0 2.4vh; font-weight: 700; }
.pwrap h2 i { color: var(--spec); font-style: normal; }

/* glass product cards */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px; }
.pcard {
  border-radius: 12px; padding: 22px;
  background: rgba(11,11,16,.66); border: 1px solid var(--line);
  backdrop-filter: blur(7px);
  opacity: 0; transform: translateY(30px) scale(.95);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .7s cubic-bezier(.34,1.56,.64,1),
              border-color .3s;
}
.pcard.inview { opacity: 1; transform: none; }
.pcard:hover { border-color: var(--spec-soft); }
.pcard h3 { margin: 0 0 6px; font-size: 19px;
  font-family: var(--display, 'Bank Gothic', sans-serif); font-weight: 600; }
.pcard h3 i { color: var(--spec); font-style: normal; }
.pcard .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--mut); }
.pcard img { width: 100%; border-radius: 8px; display: block; margin: 12px 0; }
.pcard ul { margin: 12px 0 0; padding: 0 0 0 2px; list-style: none; }
.pcard li { padding: 5px 0; color: var(--ink); font-size: 14.5px;
  border-bottom: 1px dashed #17171f; }
.pcard li:last-child { border-bottom: none; }
.pcard li::before { content: "— "; color: var(--spec); }
.price { font-family: var(--mono); font-size: 30px; color: var(--spec);
  margin: 10px 0 2px; text-shadow: 0 0 18px var(--spec-soft); }
.price small { font-size: 13px; color: var(--mut); }

/* buttons */
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pbtn {
  display: inline-block; padding: 12px 26px; border-radius: 7px;
  font: bold 13px var(--mono); letter-spacing: .14em; text-decoration: none;
  color: #050507; background: var(--spec); border: 1px solid var(--spec);
  cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s;
}
.pbtn:hover { transform: translateY(-2px); filter: brightness(1.25); }
.pbtn.ghost { background: transparent; color: var(--ink);
  border-color: #34343e; }
.pbtn.ghost:hover { border-color: var(--spec); color: var(--spec); }
.pbtn[disabled] { opacity: .45; pointer-events: none; }

/* element picker (calibration page) */
.elpick { display: flex; gap: 10px; flex-wrap: wrap; margin: 3vh 0; }
.elchip {
  font: bold 14px var(--mono); letter-spacing: .1em; cursor: pointer;
  padding: 12px 18px; border-radius: 9px; color: var(--ink);
  background: rgba(11,11,16,.66); border: 1px solid var(--line);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s,
              box-shadow .25s;
}
.elchip small { display: block; font-weight: normal; font-size: 10px;
  color: var(--mut); letter-spacing: .06em; margin-top: 3px; }
.elchip:hover { transform: translateY(-3px); }
.elchip.on { border-color: var(--spec); box-shadow: 0 0 18px var(--spec-soft);
  color: var(--spec); }

/* spec table */
.spectable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spectable td { padding: 9px 10px; border-bottom: 1px solid #131319; }
.spectable td:first-child { color: var(--ink); font-family: var(--mono);
  font-size: 13px; letter-spacing: .1em; width: 38%; }

/* raster-scan image reveal */
.raster-wrap { position: relative; display: block; overflow: hidden;
  border-radius: 8px; }
.raster-wrap img { display: block; width: 100%;
  clip-path: inset(0 0 100% 0); }
.raster-wrap.go img { animation: rasterin 1.6s steps(36) .15s forwards; }
@keyframes rasterin { to { clip-path: inset(0 0 0% 0); } }
.raster-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--spec); box-shadow: 0 0 16px var(--spec);
  opacity: 0; pointer-events: none; }
.raster-wrap.go .raster-scan { opacity: 1;
  animation: rasterscan 1.6s steps(36) .15s forwards; }
@keyframes rasterscan { to { top: 100%; opacity: 0; } }

/* THE UPLINK station */
.station {
  border-radius: 14px; padding: 26px;
  background: rgba(9,9,14,.78); border: 1px solid var(--line);
  backdrop-filter: blur(9px); position: relative; overflow: hidden;
}
.station::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--spec), transparent);
  opacity: .7;
}
#link-status {
  font-family: var(--mono); font-size: 13px; letter-spacing: .22em;
  color: var(--mut); margin-bottom: 18px;
}
#link-status b { color: var(--spec); font-weight: normal; }
#link-status.deny b { color: #ff5d5d; }
.upd-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.upd-field label { font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; color: var(--mut); }
.upd-field input[type=text], .upd-field input[type=email] {
  padding: 12px; border-radius: 7px; border: 1px solid #26262e;
  background: #0a0a10; color: var(--ink); font-size: 15px;
}
.upd-field input:focus { outline: none; border-color: var(--spec); }
.consent {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
  color: var(--ink); background: rgba(16,16,10,.5);
  border: 1px solid #2e2a18; border-radius: 8px; padding: 12px; margin: 14px 0;
}
.consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; }
.optin { display: flex; gap: 10px; align-items: center; font-size: 13px;
  color: var(--mut); margin: 4px 0 16px; }
#scan-report {
  display: none; font-family: var(--mono); font-size: 13px; line-height: 1.9;
  background: #07070c; border: 1px solid #1c1c24; border-radius: 8px;
  padding: 14px 16px; margin-top: 16px; white-space: pre-wrap;
}
#dl-zone { display: none; text-align: center; padding: 22px 0 6px; }
#dl-zone .pbtn { font-size: 15px; padding: 16px 40px; }
.relnotes { margin-top: 4vh; }
.relnotes .pcard { margin-bottom: 14px; }
.relnotes .ver { font-family: var(--mono); color: var(--spec); font-size: 13px;
  letter-spacing: .14em; }

/* contact form — receding 3D grid plane behind the inputs */
.formgrid {
  position: absolute; left: -8%; right: -8%; top: -6%; bottom: -18%;
  z-index: 0; pointer-events: none; overflow: hidden; perspective: 600px;
}
.formgrid::before {
  content: ""; position: absolute; left: -25%; right: -25%; top: 0; bottom: -40%;
  background-image:
    linear-gradient(var(--spec-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--spec-soft) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: rotateX(62deg); transform-origin: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  opacity: .45; animation: gridflow 6s linear infinite;
}
@keyframes gridflow { to { background-position: 0 40px; } }
.cform { max-width: 620px; position: relative; z-index: 1; }
.cform textarea {
  width: 100%; min-height: 140px; padding: 12px; border-radius: 7px;
  border: 1px solid #26262e; background: #0a0a10; color: var(--ink);
  font: 15px/1.5 "Segoe UI", Arial, sans-serif; resize: vertical;
}
.cform textarea:focus { outline: none; border-color: var(--spec); }
.cform select {
  padding: 12px; border-radius: 7px; border: 1px solid #26262e;
  background: #0a0a10; color: var(--ink); font-size: 15px;
}

/* footer — readable white, larger (CEO 2026-06-14) */
.pfoot {
  position: relative; z-index: 10; text-align: center;
  padding: 6vh 8vw 14vh; color: var(--ink); font-size: 16px;
}
.pfoot .attrib { margin-top: 12px; }

@media (max-width: 768px) {
  .ptitle { font-size: 11vw; }
  .pwrap { padding-top: 13vh; }
  /* readability over bright emission columns on narrow screens */
  .pcard { background: rgba(9,9,14,.90); }
  .psub, .plead { text-shadow: 0 1px 6px #000, 0 0 12px #000; }
}