/* Blackbox Digital: shared stylesheet */

:root{
  --bg:#0B0B0C;
  --panel:#151517;
  --panel-2:#1C1C1F;
  --bone:#EDEAE2;
  --muted:#8C8A82;
  --amber:#E98300;
  --amber-dim:#543000;
  --line:#28282B;
  --maxw:1040px;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg);
  color:var(--bone);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  font-size:16px;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

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

h1,h2,h3{font-family:'Space Mono', monospace; font-weight:700; letter-spacing:-0.5px;}

/* NAV */
header{border-bottom:1px solid var(--line);}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 0;
}
.logo-lockup{display:flex; align-items:center; gap:10px;}
.logo-img{height:20px; width:auto; display:block;}
.chip{
  width:24px; height:16px; border:1.5px solid var(--bone); border-radius:4px;
  position:relative; flex-shrink:0;
}
.chip::after{
  content:''; position:absolute; top:50%; left:50%;
  width:5px; height:5px; border-radius:50%; background:var(--amber);
  transform:translate(-50%,-50%);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.5;}
}
.wordmark{font-family:'Space Mono', monospace; font-size:17px; letter-spacing:-0.5px;}
.navlinks{display:flex; gap:28px; font-size:14px; color:var(--muted); flex-wrap:wrap;}
.navlinks a{position:relative; padding-bottom:2px;}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--amber); transition:width .18s ease;
}
.navlinks a:hover::after{width:100%;}
.navlinks a:hover{color:var(--bone);}
.navlinks .active{color:var(--amber);}

/* SECTION HEADINGS (all sections use this, matching the CTA h2 style) */
.section-heading{font-size:26px; margin-bottom:16px;}

/* LABEL */
.label{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin-bottom:32px;
}

/* HERO (used per page, sizes vary) */
.page-hero{padding:150px 0 150px; position:relative;}
.page-hero h1{font-size:44px; line-height:1.15; margin-bottom:18px;}
.page-hero p{color:var(--muted); font-size:17px; max-width:520px;}
.home-hero{
  padding:150px 0 150px; text-align:center; position:relative;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px;
  background-position:center top;
}
.home-hero h1{font-size:52px; line-height:1.15; margin-bottom:20px;}
.home-hero p{color:var(--muted); font-size:17px; max-width:480px; margin:0 auto 40px;}
.cursor{
  display:inline-block; width:0.5em; height:0.85em; background:var(--amber);
  margin-left:4px; vertical-align:-0.1em; animation:blink 1s step-end infinite;
}
.hl{color:var(--amber);}
@keyframes blink{0%,49%{opacity:1;} 50%,100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .cursor{animation:none;}
  .chip::after{animation:none;}
}

/* BUTTONS */
.cta{
  display:inline-block; font-family:'Space Mono', monospace; font-size:13px;
  font-weight:700; color:var(--bg); background:var(--amber); padding:12px 28px;
  border-radius:6px; letter-spacing:0.5px; border:1px solid var(--amber);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta:hover{
  background:#ED9C33; transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(233,131,0,0.18);
}
.cta:active{transform:translateY(0);}
.cta-outline{
  display:inline-block; font-family:'Space Mono', monospace; font-size:13px;
  color:var(--amber); background:transparent; border:1px solid var(--amber-dim);
  padding:11px 27px; border-radius:6px; letter-spacing:0.5px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.cta-outline:hover{
  background:var(--amber); color:var(--bg); border-color:var(--amber);
  transform:translateY(-2px);
}

/* SECTIONS */
section{padding:64px 0; border-top:1px solid var(--line);}
section.no-border{border-top:none;}

/* SIGNAL FLOW DIAGRAM */
.flow{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin-bottom:48px; flex-wrap:wrap;
}
.node{
  font-family:'Space Mono', monospace; font-size:13px; color:var(--muted);
  padding:10px 16px; border:1px solid var(--line); border-radius:6px;
  background:var(--panel);
}
.node.box{
  color:var(--amber); border-color:var(--amber-dim); background:var(--panel-2);
  font-weight:700; box-shadow:0 0 0 3px rgba(233,131,0,0.12);
  animation:glow 2.4s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 0 3px rgba(233,131,0,0.12);}
  50%{box-shadow:0 0 0 6px rgba(233,131,0,0.22);}
}
@media (prefers-reduced-motion: reduce){
  .node.box{animation:none;}
}
.arrow{width:36px; height:1px; background:var(--line); position:relative;}
.arrow::after{
  content:''; position:absolute; right:-1px; top:-3px;
  border-left:6px solid var(--line); border-top:4px solid transparent;
  border-bottom:4px solid transparent;
}

/* HOME ABOUT SNIPPET */
.about-snippet{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.about-snippet p{color:var(--muted); margin-bottom:16px;}
.about-snippet .stat-row{display:flex; gap:32px; margin-top:24px;}
.about-snippet .stat{font-family:'Space Mono', monospace;}
.about-snippet .stat .n{font-size:30px; color:var(--amber); display:block;}
.about-snippet .stat .l{font-size:12px; color:var(--muted); letter-spacing:0.5px;}

/* WHY CHOOSE US */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}

/* SERVICE CARDS */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:28px 24px; transition:transform .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--amber-dim);}
.card .num{font-family:'Space Mono', monospace; color:var(--amber); font-size:18px; font-weight:700; margin-bottom:16px; display:block;}
.card h3{font-size:19px; margin-bottom:10px;}
.card p{color:var(--muted); font-size:14px;}

/* SERVICE DETAIL BLOCKS */
.service-block{padding:56px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.service-block:first-of-type{border-top:none;}
.service-block h2{font-size:26px; margin-bottom:16px;}
.service-block p{color:var(--muted); margin-bottom:20px;}
.service-block ul{list-style:none;}
.service-block li{
  font-size:14px; color:var(--bone); padding:10px 0; border-top:1px solid var(--line);
}
.service-block li:first-child{border-top:none;}
.service-block li::before{content:'› '; color:var(--amber);}

/* REVIEWS */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.review{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:24px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .18s ease, border-color .18s ease;
}
.review:hover{transform:translateY(-4px); border-color:var(--amber-dim);}
.review .stars{color:var(--amber); font-family:'Space Mono', monospace; font-size:13px; margin-bottom:14px;}
.review p.quote{font-size:14px; color:var(--bone); margin-bottom:20px;}
.review .who{font-family:'Space Mono', monospace; font-size:12px; color:var(--muted);}

/* TEAM */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.team-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.team-card:hover{transform:translateY(-4px); border-color:var(--amber-dim);}
.team-info{padding:20px;}
.team-info h3{font-size:16px; margin-bottom:4px;}
.team-info .role{font-family:'Space Mono', monospace; font-size:12px; color:var(--amber); margin-bottom:12px; display:block;}
.team-info p{font-size:13px; color:var(--muted);}

/* IMAGE PLACEHOLDERS */
.img-placeholder{
  background:var(--panel-2); border:1px dashed var(--line); border-radius:8px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-family:'Space Mono', monospace; font-size:12px;
  letter-spacing:0.5px; padding:16px;
}
.ph-square{aspect-ratio:1/1;}
.ph-wide{aspect-ratio:16/9;}
.ph-portrait{aspect-ratio:3/4;}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.field{margin-bottom:18px;}
.field label{
  display:block; font-family:'Space Mono', monospace; font-size:12px;
  color:var(--muted); margin-bottom:8px; letter-spacing:0.5px;
}
.field input, .field textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:12px 14px; color:var(--bone); font-family:'Inter', sans-serif; font-size:14px;
}
.field textarea{resize:vertical; min-height:120px;}
.field input:focus, .field textarea:focus{outline:1px solid var(--amber); border-color:var(--amber);}
.contact-info .row{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line);}
.contact-info .row:first-child{border-top:none;}
.contact-info .row .k{font-family:'Space Mono', monospace; font-size:12px; color:var(--muted); width:90px; flex-shrink:0;}
.contact-info .row .v{font-size:14px;}

/* FOOTER */
footer{
  padding:36px 0; border-top:1px solid var(--line); display:flex;
  justify-content:space-between; align-items:center; font-size:13px; color:var(--muted);
  flex-wrap:wrap; gap:12px;
}
footer .foot-links{display:flex; gap:20px;}

/* RESPONSIVE */
@media (max-width:760px){
  .cards, .reviews, .team-grid, .why-grid, .about-snippet{grid-template-columns:1fr;}
  .service-block{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .page-hero h1{font-size:32px;}
  .home-hero h1{font-size:36px;}
  .flow{gap:8px;}
  .arrow{width:18px;}
}