/* ==========================================================================
   TECHNOLOGY / INFRASTRUCTURE PAGE
   An engineering / spec-sheet register: mono labels, ruled tables, a custom
   systems-redundancy schematic, and documentary photography rather than
   glossy lifestyle shots. Deliberately more "technical" than the other pages.
   ========================================================================== */

/* ------------------------------- Hero ------------------------------- */
.tech-hero{
  position:relative;
  background:var(--navy-900); color:#fff;
  padding-top:calc(var(--section-pad-y) + 4rem);
  padding-bottom:var(--space-9);
  overflow:hidden;
}
.tech-hero::before{
  /* faint grid — the "blueprint paper" backdrop */
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, #000 40%, transparent 90%);
}
.tech-hero-inner{ position:relative; z-index:2; max-width:70ch; }
.tech-hero-inner h1{ font-size:var(--fs-hero); max-width:16ch; margin-top:1.5rem; }
.tech-hero-inner p{ margin-top:1.75rem; color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); max-width:52ch; }
.tech-hero-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.5rem; }

/* ------------------------------ Spec grid ------------------------------ */
.tech-spec{ background:var(--white); }
.spec-head{ margin-bottom:var(--space-8); max-width:60ch; }
.spec-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); margin-top:1.25rem; }
.spec-head p{ margin-top:1.1rem; color:var(--ink-soft); font-size:var(--fs-body-lg); }

.spec-categories{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3) var(--space-8); }
.spec-cat{ border-top:1px solid var(--line-on-light); padding-block:var(--space-6); }
.spec-cat-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sky-600); margin-bottom:1.25rem; display:block;
}
.spec-row{
  display:grid; grid-template-columns:2rem 1fr auto; gap:1rem; align-items:baseline;
  padding-block:.85rem;
  padding-inline:.6rem;
  margin-inline:-.6rem;
  border-top:1px solid var(--line-on-light-soft);
  border-radius:var(--radius-sm);
  transition:background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.spec-row:first-of-type{ border-top:0; }
.spec-row:hover{ background:var(--paper-dim); }
.spec-row .spec-idx{ font-family:var(--font-mono); font-size:.72rem; color:var(--charcoal-300); }
.spec-row .spec-name{ font-size:1rem; }
.spec-row .spec-name small{ display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.25rem; font-weight:400; }
.spec-row .spec-status{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sky-600); display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
}
.spec-row .spec-status::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--sky-500); transition:transform .3s var(--ease-out); }
.spec-row:hover .spec-status::before{ transform:scale(1.35); }
@media (max-width:860px){ .spec-categories{ grid-template-columns:1fr; } }

/* ------------------------------ Schematic ------------------------------ */
.tech-schematic{ background:var(--navy-800); color:#fff; padding-block:var(--section-pad-y-lg); }
.schematic-head{ max-width:52ch; margin-bottom:var(--space-8); }
.schematic-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); margin-top:1.25rem; }
.schematic-head p{ margin-top:1rem; color:rgba(255,255,255,.62); font-size:var(--fs-body-lg); }
.schematic-frame{ position:relative; }
.schematic-frame svg{ width:100%; height:auto; display:block; }
.sc-line{ stroke:var(--sky-500); stroke-width:1.3; fill:none; opacity:.55; stroke-dasharray:5 5; }
.sc-line.is-power{ stroke:#7FCBEF; }
.sc-node{ fill:var(--navy-700); stroke:var(--line-on-dark); stroke-width:1; }
.sc-node.is-accent{ fill:var(--sky-700); stroke:var(--sky-400); }
.sc-label{ font-family:var(--font-mono); font-size:10.5px; fill:rgba(255,255,255,.78); letter-spacing:.04em; }
.sc-label.is-title{ fill:#fff; font-size:12px; letter-spacing:.06em; }
.sc-sub{ font-family:var(--font-mono); font-size:8.5px; fill:rgba(255,255,255,.45); letter-spacing:.04em; }

/* ------------------------------ Proof stats ------------------------------ */
.tech-proof{ background:var(--navy-900); color:#fff; position:relative; overflow:hidden; padding-block:var(--section-pad-y-lg); }
.proof-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-9); align-items:center; }
.proof-copy .eyebrow{ margin-bottom:1.5rem; }
.proof-copy h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); max-width:16ch; margin-bottom:1.5rem; }
.proof-copy p{ color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); max-width:44ch; }
.proof-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-on-dark-soft); border:1px solid var(--line-on-dark-soft); }
.proof-stats .stat{ background:var(--navy-900); padding:2.25rem; }
@media (max-width:960px){ .proof-grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .proof-stats{ grid-template-columns:1fr; } }

/* ------------------------------ Systems gallery ------------------------------ */
/* Deliberately asymmetric bento composition rather than a uniform 4-up grid —
   the CCTV camera gets a larger feature tile, the speed-test screenshot (which
   is naturally landscape) gets a wide tile instead of being squeezed to 3:4. */
.tech-gallery{ background:var(--paper); }
.gallery-head{ margin-bottom:var(--space-8); max-width:56ch; }
.gallery-head h2{ font-family:var(--font-display); font-size:var(--fs-display-lg); margin-top:1.25rem; }
.gallery-head p{ margin-top:1.1rem; color:var(--ink-soft); font-size:var(--fs-body-lg); }
.gallery-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-5); }
.gallery-item{ position:relative; }
.gallery-item:nth-child(1){ grid-column:span 3; }
.gallery-item:nth-child(2){ grid-column:span 3; }
.gallery-item:nth-child(3){ grid-column:span 2; }
.gallery-item:nth-child(4){ grid-column:span 4; }
.gallery-item:nth-child(1) .gi-frame,
.gallery-item:nth-child(2) .gi-frame{ aspect-ratio:4/3; }
.gallery-item:nth-child(3) .gi-frame{ aspect-ratio:3/4; }
.gallery-item:nth-child(4) .gi-frame{ aspect-ratio:16/7; }
.gallery-item .gi-frame{ position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4; background:var(--charcoal-700); }
.gallery-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-item .gi-cap{ margin-top:1rem; font-size:.85rem; color:var(--ink-soft); }
.gallery-item .gi-cap b{ display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sky-600); margin-bottom:.35rem; font-weight:500; transition:color .3s var(--ease-out); }
.gallery-item:hover .gi-cap b{ color:var(--sky-500); }
@media (max-width:960px){
  .gallery-grid{ grid-template-columns:1fr 1fr; }
  .gallery-item:nth-child(1),.gallery-item:nth-child(2),.gallery-item:nth-child(3),.gallery-item:nth-child(4){ grid-column:span 1; }
  .gallery-item:nth-child(1) .gi-frame,.gallery-item:nth-child(2) .gi-frame,.gallery-item:nth-child(3) .gi-frame,.gallery-item:nth-child(4) .gi-frame{ aspect-ratio:3/4; }
}
@media (max-width:560px){ .gallery-grid{ grid-template-columns:1fr; } }

/* ------------------------------ CTA ------------------------------ */
.tech-cta{
  position:relative; background:var(--navy-900); color:#fff;
  padding-block:var(--section-pad-y-lg); text-align:center; overflow:hidden;
}
.tech-cta h2{ font-family:var(--font-display); font-size:var(--fs-display-xl); max-width:20ch; margin-inline:auto; }
.tech-cta p{ margin:1.5rem auto 0; max-width:48ch; color:rgba(255,255,255,.65); font-size:var(--fs-body-lg); }
.tech-cta .cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }