.pes-wrap{
  --navy-deep:#123963;
  --navy-base:#1d4d85;
  --navy-mid:#2b5f9e;
  --navy-line:rgba(200,222,250,0.22);
  --ink:#ffffff;
  --ink-muted:#bcd3f0;
  --pes-accent:#7db4f5;
  --pes-accent-dim:rgba(125,180,245,0.2);

  box-sizing:border-box;
  background:
    radial-gradient(1200px 600px at 12% -10%, #2c5c99 0%, transparent 60%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-base) 55%, var(--navy-deep) 100%);
  font-family:'Inter', sans-serif;
  color:var(--ink);
  padding:96px 24px;
}
.pes-wrap *{box-sizing:border-box;}
.pes-wrap .pes-inner{max-width:1180px;margin:0 auto;}

.pes-wrap .pes-head{max-width:640px;margin-bottom:64px;}
.pes-wrap .pes-kicker{
  font-family:'Space Grotesk', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--pes-accent);
  margin:0 0 14px;
}
.pes-wrap .pes-kicker::before{
  content:"";
  display:inline-block;
  width:18px;height:1px;
  background:var(--pes-accent);
  margin-right:10px;
  vertical-align:middle;
}
.pes-wrap h2.pes-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(30px, 4vw, 44px);
  line-height:1.15;
  margin:0 0 18px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.pes-wrap .pes-head p{
  color:var(--ink-muted);
  font-size:16px;
  line-height:1.65;
  margin:0;
}

.pes-wrap .pes-panel{
  display:grid;
  grid-template-columns:340px 1fr;
  border:1px solid var(--navy-line);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  overflow:hidden;
}

.pes-wrap .pes-list{
  border-right:1px solid var(--navy-line);
}
.pes-wrap .pes-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 26px;
  border-bottom:1px solid var(--navy-line);
  cursor:pointer;
  position:relative;
  background:transparent;
  transition:background 0.15s ease;
}
.pes-wrap .pes-item:last-child{border-bottom:none;}
.pes-wrap .pes-item:hover{background:rgba(255,255,255,0.02);}
.pes-wrap .pes-item .pes-trace{
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:transparent;
  transition:background 0.2s ease;
}
.pes-wrap .pes-item.active{background:rgba(125,180,245,0.06);}
.pes-wrap .pes-item.active .pes-trace{background:var(--pes-accent);}
.pes-wrap .pes-item.active .pes-name{color:var(--ink);}
.pes-wrap .pes-item .pes-ico{
  width:36px;height:36px;
  flex:none;
  border:1px solid var(--navy-line);
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-muted);
  transition:border-color 0.2s ease, color 0.2s ease;
}
.pes-wrap .pes-item.active .pes-ico{border-color:var(--pes-accent); color:var(--pes-accent);}
.pes-wrap .pes-item .pes-ico svg{width:17px;height:17px;}
.pes-wrap .pes-item .pes-name{
  font-family:'Space Grotesk', sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-muted);
  transition:color 0.2s ease;
}

.pes-wrap .pes-detail{
  padding:44px 48px;
  position:relative;
  display:flex;
  flex-direction:column;
  background-image:
    linear-gradient(var(--navy-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-line) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:-1px -1px;
  min-height:320px;
}
.pes-wrap .pes-detail::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, var(--navy-base) 20%, transparent 55%);
  pointer-events:none;
}
.pes-wrap .pes-detail-inner{position:relative; z-index:1;}

.pes-wrap .pes-ico-big{
  width:52px;height:52px;
  border:1px solid rgba(125,180,245,0.35);
  background:var(--pes-accent-dim);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  color:var(--pes-accent);
  margin-bottom:26px;
}
.pes-wrap .pes-ico-big svg{width:24px;height:24px;}

.pes-wrap .pes-detail h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:26px;
  font-weight:600;
  margin:0 0 14px;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.pes-wrap .pes-detail p{
  color:var(--ink-muted);
  font-size:15.5px;
  line-height:1.75;
  max-width:52ch;
  margin:0 0 32px;
}

.pes-wrap .pes-readout{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:46px;
  margin-top:auto;
}
.pes-wrap .pes-readout span{
  width:5px;
  background:var(--navy-mid);
  border-radius:1px;
  transition:background 0.3s ease, height 0.4s ease;
}
.pes-wrap .pes-readout span.on{background:var(--pes-accent);}

.pes-wrap .pes-detail-extra{margin-bottom:8px;}

.pes-wrap .pes-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 22px;
}
.pes-wrap .pes-chip{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:500;
  color:var(--ink-muted);
  background:transparent;
  border:1px solid var(--navy-line);
  border-radius:20px;
  padding:8px 16px;
  cursor:pointer;
  transition:all 0.15s ease;
}
.pes-wrap .pes-chip:hover{color:var(--ink); border-color:var(--pes-accent);}
.pes-wrap .pes-chip.active{
  color:var(--navy-deep);
  background:var(--pes-accent);
  border-color:var(--pes-accent);
  font-weight:600;
}

.pes-wrap .pes-sub-panel{
  padding-top:4px;
  border-top:1px solid var(--navy-line);
}
.pes-wrap .pes-sub-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin:20px 0 10px;
}
.pes-wrap .pes-sub-text{
  color:var(--ink-muted);
  font-size:14.5px;
  line-height:1.7;
  max-width:52ch;
  margin:0 0 20px;
}
.pes-wrap .pes-bullets{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(180px,1fr));
  gap:8px 24px;
  max-width:56ch;
}
.pes-wrap .pes-bullets li{
  position:relative;
  padding-left:16px;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.5;
}
.pes-wrap .pes-bullets li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:6px; height:1px;
  background:var(--pes-accent);
}
.pes-wrap .pes-flow{
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0.01em;
  padding:14px 18px;
  border:1px solid var(--navy-line);
  border-radius:3px;
  background:rgba(255,255,255,0.02);
  max-width:fit-content;
}
@media (max-width:600px){
  .pes-wrap .pes-bullets{grid-template-columns:1fr;}
}

@media (max-width:820px){
  .pes-wrap{padding:56px 18px;}
  .pes-wrap .pes-panel{grid-template-columns:1fr;}
  .pes-wrap .pes-list{border-right:none;}
  .pes-wrap .pes-detail{padding:36px 26px;}
}