.recon-page{
  background:
    linear-gradient(rgba(2,3,5,.68),rgba(2,3,5,.87)),
    url("assets/cyber-background.jpg") center center/cover fixed no-repeat;
}
.recon-hero{
  min-height:560px;
  display:flex;
  align-items:flex-end;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 72% 34%,rgba(180,0,0,.17),transparent 25%),
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.86));
}
.recon-hero-inner{
  width:min(var(--max),calc(100% - 40px));
  margin:0 auto;
  padding:0 0 62px;
}
.recon-hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4rem,8vw,7rem);
  line-height:.92;
  margin:12px 0 20px;
}
.recon-hero p:not(.eyebrow){
  max-width:840px;
  color:#c2c2c7;
  font-size:1.12rem;
  line-height:1.7;
}
.workflow-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:20px;
  border:1px solid #2c2c31;
  border-radius:14px;
  background:rgba(7,7,9,.9);
}
.workflow-strip span{
  border:1px solid #36363c;
  border-radius:999px;
  padding:8px 11px;
  color:#d2d2d6;
  font-size:.78rem;
}
.workflow-strip b{color:#a7393e}
.phase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.phase-grid article{
  padding:24px;
  border:1px solid #29292f;
  border-top-color:rgba(227,27,35,.48);
  border-radius:15px;
  background:linear-gradient(180deg,rgba(12,12,15,.91),rgba(6,6,8,.96));
  backdrop-filter:blur(8px);
}
.phase-grid article>span{
  color:#d64b50;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.85rem;
}
.phase-grid h3{
  font-family:Georgia,"Times New Roman",serif;
  margin:11px 0 9px;
  font-size:1.35rem;
}
.phase-grid p{color:#96979d;line-height:1.62;font-size:.9rem}
.matrix{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.matrix>div{
  display:flex;
  justify-content:space-between;
  gap:22px;
  padding:18px 20px;
  border:1px solid #2b2b31;
  border-radius:12px;
  background:rgba(8,8,10,.89);
}
.matrix strong{font-size:.9rem}
.matrix span{color:#d04b50;text-align:right;font-size:.85rem}
.loop-box{
  padding:32px;
  border:1px solid #402326;
  border-left:3px solid #d91d24;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(16,8,9,.92),rgba(7,7,9,.96));
}
.loop-box h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.2rem;
  margin:9px 0 10px;
}
.loop-box>p:not(.kicker){color:#98999f;line-height:1.65}
.loop-visual{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.loop-visual span{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid #3b3b41;
  background:#0b0b0d;
  color:#ddd;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
}
.loop-visual b{color:#d94b50}
@media(max-width:1050px){.phase-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .phase-grid,.matrix{grid-template-columns:1fr}
  .matrix>div{flex-direction:column;gap:6px}
  .matrix span{text-align:left}
  .recon-page{background-attachment:scroll}
}