/* Focus pass: stronger interactive demo and layered contact block */
.hero .app{
  border:2px solid var(--petrol);
  box-shadow:
    0 0 0 7px rgba(28,80,101,.10),
    0 30px 72px rgba(20,55,64,.26),
    0 8px 20px rgba(20,55,64,.13);
}
.hero .titlebar{
  color:#fff;background:linear-gradient(135deg,var(--petrol-deep),var(--petrol));
  border-bottom-color:#0d3341;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.hero .titlebar .t{color:#e4eff2}
.hero .titlebar .v{color:#e7f1f3;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.hero .titlebar .dots i{background:#7394a0;border-color:#9cb3bb}
.hero .titlebar::before{
  content:"ИНТЕРАКТИВ";display:inline-flex;order:3;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  color:#08764b;background:#dcf5e9;border:1px solid #80cbaa;border-radius:4px;padding:2px 6px;
}

#contact>.wrap>.panel{
  background:#dce8e4;border-color:#7c9e95;
}
#contact>.wrap>.panel>.pbody{
  background:linear-gradient(135deg,#dfeae7,#cbdeda);
}
#contact .final{align-items:stretch}
#contact .photo{
  height:auto;min-height:250px;background:linear-gradient(145deg,var(--forest),var(--petrol-deep));
  border-color:#517c76;box-shadow:0 12px 28px rgba(7,45,38,.20);
}
#contact .photo::after{
  background:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:24px 24px;
}
#contact .photo span{
  color:#fff;background:rgba(9,49,45,.86);border-color:rgba(255,255,255,.28);
}
#contact .identity-card span{
  inset:50% auto auto 50%;bottom:auto;left:50%;display:flex;min-width:150px;
  flex-direction:column;align-items:center;gap:5px;padding:14px 18px;
  transform:translate(-50%,-50%);text-align:center;
}
#contact .identity-card span b{
  font:700 46px/1 var(--sans);letter-spacing:-.05em;
}
#contact .identity-card span small{
  font:500 10px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
#contact .who2{
  background:#fff;border:1px solid #aebfba;border-radius:10px;padding:26px 28px;
  box-shadow:0 12px 30px rgba(12,50,43,.11);
}
#contact .who2{color:#1b2430}
#contact .who2 .bio{color:#5c6675}
#contact .who2 .pitch{color:#1b2430}
#contact .who2 .contacts a{color:#1b2430;border-color:#9aa6a4}
#contact .who2 .quiet{color:#5c6675}

@media(max-width:640px){
  .hero .titlebar::before{display:none}
  #contact .final{gap:18px}
  #contact .photo{min-height:190px}
  #contact .who2{padding:21px 19px}
}