/* ==========================================================================
   Melech Network — design tokens
   Palette: charcoal surveillance-room dark, amber floodlight accent,
   teal monitor-glow secondary, red REC indicator used sparingly.
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (system data)
   ========================================================================== */

:root{
  --bg: #0E1116;
  --bg-elev: #161B22;
  --bg-elev-2: #1D232D;
  --line: #2A3140;
  --line-soft: #1E2530;
  --text: #EDEFF2;
  --text-muted: #8B93A1;
  --text-faint: #545E6E;
  --amber: #E8A33D;
  --amber-dim: #B57C2A;
  --teal: #3FB6A8;
  --rec: #E5484D;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 4px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.68,.31,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); font-weight:700; }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--text-muted); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--amber); color:#0E1116; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

.accent{ color:var(--amber); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:16px; height:1px;
  background:var(--amber);
  display:inline-block;
}

/* ambient scanline layer */
.scanline{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(232,163,61,.02) 0px, rgba(232,163,61,.02) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
  opacity:.5;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:13px 22px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  cursor:pointer;
  white-space:nowrap;
}
.btn-amber{
  background:var(--amber);
  border-color:var(--amber);
  color:#12100A;
  font-weight:500;
}
.btn-amber:hover{ background:#f2b158; border-color:#f2b158; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); }
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,17,22,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:padding .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled{ background:rgba(14,17,22,.97); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  transition:padding .3s var(--ease);
}
.site-header.is-scrolled .header-inner{ padding-top:12px; padding-bottom:12px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.01em; }
.brand-sub{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:var(--text-faint); }

.site-nav{ display:flex; gap:6px; }
.site-nav a{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  font-size:.92rem;
  color:var(--text-muted);
  border-radius:var(--radius);
  transition:color .2s, background .2s;
}
.nav-index{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint); }
.site-nav a:hover, .site-nav a.active{ color:var(--text); background:var(--bg-elev); }
.site-nav a.active .nav-index{ color:var(--amber); }

.header-cta{ display:flex; align-items:center; gap:16px; }
.status-pill{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--text-muted); display:flex; align-items:center; gap:8px;
}
.rec-dot{
  width:7px; height:7px; border-radius:50%; background:var(--rec); display:inline-block;
  box-shadow:0 0 0 0 rgba(229,72,77,.6);
  animation:pulse 2s infinite;
}
.rec-dot.small{ width:6px; height:6px; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(229,72,77,.5); }
  70%{ box-shadow:0 0 0 6px rgba(229,72,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(229,72,77,0); }
}

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span{ width:22px; height:2px; background:var(--text); display:block; transition:transform .3s var(--ease), opacity .3s; }

@media (max-width:900px){
  .site-nav, .header-cta .status-pill{ display:none; }
  .nav-toggle{ display:flex; }
  .header-cta .btn{ display:none; }
  .site-nav.is-open{
    display:flex; flex-direction:column;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg-elev); border-bottom:1px solid var(--line);
    padding:10px 20px 18px;
  }
  .site-nav.is-open a{ padding:12px 6px; border-bottom:1px solid var(--line-soft); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding:110px 0 90px;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 60% at 60% 20%, black, transparent 75%);
  pointer-events:none;
}
.hero-inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }
.hero h1{ margin-bottom:.4em; }
.hero-lede{ font-size:1.08rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

.hero-panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg-elev);
  padding:22px;
  font-family:var(--font-mono);
}
.hero-panel-head{ display:flex; justify-content:space-between; align-items:center; font-size:.68rem; letter-spacing:.1em; color:var(--text-faint); margin-bottom:16px; text-transform:uppercase; }
.hero-panel-head .live{ color:var(--rec); display:flex; align-items:center; gap:6px; }
.feed-list{ display:flex; flex-direction:column; gap:0; }
.feed-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 4px;
  border-bottom:1px dashed var(--line-soft);
  font-size:.78rem;
}
.feed-row:last-child{ border-bottom:0; }
.feed-name{ color:var(--text); }
.feed-status{ color:var(--teal); display:flex; align-items:center; gap:6px; }
.feed-status::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--teal); }

.trust-strip{ border-bottom:1px solid var(--line-soft); background:var(--bg-elev); }
.trust-inner{ display:flex; flex-wrap:wrap; gap:14px 34px; padding:22px 0; align-items:center; justify-content:space-between; }
.trust-item{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; }
.trust-item b{ color:var(--text-muted); font-weight:500; }

@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Section scaffolding + scroll reveal
   ========================================================================== */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal-group] > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* ==========================================================================
   Viewfinder card — signature component
   Frames content the way a CCTV feed frames a scene: corner brackets,
   a channel label, and a live status dot. Used for services + feature cards.
   ========================================================================== */
.viewfinder{
  position:relative;
  border:1px solid var(--line);
  background:var(--bg-elev);
  border-radius:6px;
  padding:26px 24px 24px;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.viewfinder:hover{ border-color:var(--amber-dim); transform:translateY(-3px); background:var(--bg-elev-2); }
.viewfinder::before,
.viewfinder::after,
.photo-slot::before,
.photo-slot::after,
.vf-tl, .vf-br{ content:''; position:absolute; width:14px; height:14px; border-color:var(--amber); opacity:.55; transition:opacity .3s; z-index:2; }
.viewfinder::before,
.photo-slot::before{ top:8px; left:8px; border-top:2px solid; border-left:2px solid; }
.viewfinder::after,
.photo-slot::after{ bottom:8px; right:8px; border-bottom:2px solid; border-right:2px solid; }
.viewfinder:hover::before,
.viewfinder:hover::after,
.photo-slot:hover::before,
.photo-slot:hover::after{ opacity:1; }

/* ==========================================================================
   Photo slot — a viewfinder-framed image container.
   Drop a real photo at the path in data-src and it fills the frame;
   until then, a labelled placeholder shows exactly what file is expected.
   ========================================================================== */
.photo-slot{
  position:relative;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:var(--bg-elev-2) center/cover no-repeat;
  aspect-ratio:var(--ar, 4/3);
  transition:border-color .3s var(--ease);
}
.photo-slot:hover{ border-color:var(--amber-dim); }
.photo-slot-fallback{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:20px; text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px),
    var(--bg-elev-2);
  color:var(--text-faint);
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  transition:opacity .3s var(--ease);
}
.photo-slot-fallback .icon{ color:var(--text-faint); opacity:.8; }
.photo-slot-fallback code{ color:var(--amber-dim); font-size:.68rem; word-break:break-all; }
.photo-slot.has-photo .photo-slot-fallback{ opacity:0; pointer-events:none; }
.photo-slot-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px 14px;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent);
  opacity:0; transition:opacity .3s;
}
.photo-slot.has-photo .photo-slot-caption{ opacity:1; }

.photo-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:800px){ .photo-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .photo-grid{ grid-template-columns:1fr; } }

/* Hero photo variant — same frame, plus camera-OSD style overlays */
.hero-photo{ aspect-ratio:5/4; }
.hero-photo .photo-slot-fallback{ padding:0; }
.hero-illustration{ width:100%; height:100%; }
.hero-illustration svg{ width:100%; height:100%; display:block; }
.hero-osd{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(237,239,242,.85);
}
.hero-osd .osd-top-left{ position:absolute; top:16px; left:20px; display:flex; align-items:center; gap:7px; }
.hero-osd .osd-top-right{ position:absolute; top:16px; right:20px; text-align:right; opacity:.8; }
.hero-osd .osd-bottom-left{ position:absolute; bottom:14px; left:20px; opacity:.85; }
.hero-osd .scan-sweep{
  position:absolute; left:0; right:0; height:120px; top:-120px;
  background:linear-gradient(180deg, rgba(232,163,61,0) 0%, rgba(232,163,61,.12) 50%, rgba(232,163,61,0) 100%);
  animation:sweep 6s linear infinite;
}
@keyframes sweep{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(calc(100% + 240px)); }
}

/* ==========================================================================
   Scroll progress indicator
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  background:transparent;
}
.scroll-progress-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--amber-dim), var(--amber));
  transition:width .08s linear;
}

/* parallax-friendly layers (transform applied via JS on scroll) */
.parallax-layer{ will-change:transform; }

.vf-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  color:var(--text-faint); text-transform:uppercase; margin-bottom:18px;
}
.vf-head .rec-dot{ margin-right:6px; }
.vf-icon{
  width:44px; height:44px; border-radius:6px;
  background:var(--bg-elev-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  color:var(--amber);
}
.viewfinder h3{ margin-bottom:8px; }
.viewfinder p{ font-size:.94rem; margin-bottom:0; }

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

/* ==========================================================================
   Process timeline (About page) — a real sequence, numbered on purpose
   ========================================================================== */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-soft); border-left:1px solid var(--line-soft); }
.process-step{ padding:32px 26px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); position:relative; }
.process-step .num{ font-family:var(--font-mono); color:var(--amber); font-size:.85rem; display:block; margin-bottom:14px; }
@media (max-width:900px){ .process{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  background:var(--bg-elev);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute; left:50%; top:50%;
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(232,163,61,.08), transparent 60%);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.cta-band .wrap{ position:relative; }
.cta-band h2{ margin-bottom:.3em; }
.cta-band p{ max-width:52ch; margin-left:auto; margin-right:auto; }
.cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }

/* ==========================================================================
   About page specifics
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.stat-row{ display:flex; gap:36px; margin-top:30px; flex-wrap:wrap; }
.stat{ font-family:var(--font-mono); }
.stat .val{ font-size:1.6rem; color:var(--amber); display:block; }
.stat .label{ font-size:.68rem; letter-spacing:.08em; color:var(--text-faint); text-transform:uppercase; }

.coverage-panel{ border:1px solid var(--line); border-radius:6px; background:var(--bg-elev); padding:28px; }
.coverage-panel .vf-head{ margin-bottom:20px; }
.coverage-list li{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line-soft); font-size:.92rem; }
.coverage-list li:last-child{ border-bottom:0; }
.coverage-list li::before{ content:''; width:6px; height:6px; background:var(--teal); border-radius:50%; flex:none; }

/* ==========================================================================
   Services page
   ========================================================================== */
.service-detail{
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  padding:30px 0; border-bottom:1px solid var(--line-soft);
}
.service-detail:first-of-type{ border-top:1px solid var(--line-soft); }
.service-detail .idx{ font-family:var(--font-mono); color:var(--amber-dim); font-size:.85rem; padding-top:4px; }
.service-detail h3{ margin-bottom:6px; }
.service-detail p{ margin-bottom:0; max-width:64ch; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:52px; align-items:flex-start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.form-panel{ border:1px solid var(--line); border-radius:6px; background:var(--bg-elev); padding:32px; position:relative; }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  padding:13px 14px;
  font-family:var(--font-body);
  font-size:.95rem;
  transition:border-color .2s;
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238B93A1' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--amber); outline:none; }
.field textarea{ min-height:130px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.form-msg{ font-family:var(--font-mono); font-size:.82rem; padding:13px 14px; border-radius:var(--radius); margin-bottom:20px; display:none; }
.form-msg.show{ display:block; }
.form-msg.success{ background:rgba(63,182,168,.12); border:1px solid var(--teal); color:var(--teal); }
.form-msg.error{ background:rgba(229,72,77,.1); border:1px solid var(--rec); color:var(--rec); }

.contact-side{ display:flex; flex-direction:column; gap:22px; }
.contact-card{ border:1px solid var(--line); border-radius:6px; background:var(--bg-elev); padding:22px; }
.contact-card .vf-head{ margin-bottom:14px; }
.contact-card a, .contact-card span.line{ display:block; color:var(--text-muted); font-size:.92rem; padding:4px 0; }
.contact-card a:hover{ color:var(--amber); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top:1px solid var(--line-soft); padding-top:64px; background:var(--bg-elev); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-tagline{ font-size:.9rem; max-width:32ch; margin-top:10px; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-muted);
  transition:border-color .2s, color .2s;
}
.social-row a:hover{ border-color:var(--amber); color:var(--amber); }
.footer-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; color:var(--text-faint); text-transform:uppercase; display:block; margin-bottom:14px; }
.footer-col{ display:flex; flex-direction:column; gap:9px; font-size:.9rem; color:var(--text-muted); }
.footer-col a:hover{ color:var(--amber); }
.footer-address{ font-size:.9rem; color:var(--text-muted); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-top:1px solid var(--line-soft); padding:20px 28px;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.05em; color:var(--text-faint); text-transform:uppercase;
}
.footer-status{ display:flex; align-items:center; gap:8px; }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero{ padding:70px 0 56px; border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden; }
.page-hero .wrap{ position:relative; }
.page-hero p{ max-width:60ch; }